ar-design 0.3.77 → 0.3.79

package/dist/assets/css/components/form/input/phone/styles.css

@@ -0,0 +1,50 @@
+.ar-input-phone-wrapper {
+  display: flex;
+  flex-direction: row;
+
+  > .ar-select-wrapper {
+    flex: 0 0 20%;
+
+    > .ar-select {
+      > .ar-input-wrapper {
+        > .ar-input {
+          > .input {
+            > input {
+              border-right: none;
+              border-radius: 0;
+              border-top-left-radius: var(--border-radius-sm);
+              border-bottom-left-radius: var(--border-radius-sm);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  > .ar-input-wrapper {
+    flex: 1;
+
+    > .ar-input {
+      > .input {
+        > input {
+          border-radius: 0;
+          border-top-right-radius: var(--border-radius-sm);
+          border-bottom-right-radius: var(--border-radius-sm);
+        }
+      }
+    }
+  }
+
+  /* @media (max-width: 600px) {
+    flex-direction: column;
+
+    .ar-select-wrapper,
+    .ar-input-wrapper {
+      flex: 1 1 100%;
+
+      .ar-input .input input {
+        border-radius: var(--border-radius-sm);
+      }
+    }
+  } */
+}

package/dist/assets/css/components/form/input/styles.css

@@ -101,6 +101,8 @@
   }
 }
 
+/* PHONE */
+@import url("./phone/styles.css");
 /* OTP */
 @import url("./otp/styles.css");
 

package/dist/assets/css/core/variants/filled.css

@@ -1,8 +1,8 @@
 /* #region BLUE */
 .filled:not(.disabled) {
   &.blue {
-    background-color: var(--blue-500);
-    color: var(--white);
+    background-color: var(--blue-500) !important;
+    color: var(--white) !important;
     
     &.active {
       animation: clicked-blue ease-in-out 750ms 0s 1 normal both;
@@ -40,8 +40,8 @@ button.filled:not(.disabled) {
 /* #region PURPLE */
 .filled:not(.disabled) {
   &.purple {
-    background-color: var(--purple-500);
-    color: var(--white);
+    background-color: var(--purple-500) !important;
+    color: var(--white) !important;
     
     &.active {
       animation: clicked-purple ease-in-out 750ms 0s 1 normal both;
@@ -79,8 +79,8 @@ button.filled:not(.disabled) {
 /* #region PINK */
 .filled:not(.disabled) {
   &.pink {
-    background-color: var(--pink-500);
-    color: var(--white);
+    background-color: var(--pink-500) !important;
+    color: var(--white) !important;
     
     &.active {
       animation: clicked-pink ease-in-out 750ms 0s 1 normal both;
@@ -118,8 +118,8 @@ button.filled:not(.disabled) {
 /* #region RED */
 .filled:not(.disabled) {
   &.red {
-    background-color: var(--red-500);
-    color: var(--white);
+    background-color: var(--red-500) !important;
+    color: var(--white) !important;
     
     &.active {
       animation: clicked-red ease-in-out 750ms 0s 1 normal both;
@@ -157,8 +157,8 @@ button.filled:not(.disabled) {
 /* #region ORANGE */
 .filled:not(.disabled) {
   &.orange {
-    background-color: var(--orange-500);
-    color: var(--white);
+    background-color: var(--orange-500) !important;
+    color: var(--white) !important;
     
     &.active {
       animation: clicked-orange ease-in-out 750ms 0s 1 normal both;
@@ -196,8 +196,8 @@ button.filled:not(.disabled) {
 /* #region YELLOW */
 .filled:not(.disabled) {
   &.yellow {
-    background-color: var(--yellow-500);
-    color: var(--black);
+    background-color: var(--yellow-500) !important;
+    color: var(--black) !important;
     
     &.active {
       animation: clicked-yellow ease-in-out 750ms 0s 1 normal both;
@@ -235,8 +235,8 @@ button.filled:not(.disabled) {
 /* #region GREEN */
 .filled:not(.disabled) {
   &.green {
-    background-color: var(--green-500);
-    color: var(--white);
+    background-color: var(--green-500) !important;
+    color: var(--white) !important;
     
     &.active {
       animation: clicked-green ease-in-out 750ms 0s 1 normal both;
@@ -274,8 +274,8 @@ button.filled:not(.disabled) {
 /* #region TEAL */
 .filled:not(.disabled) {
   &.teal {
-    background-color: var(--teal-500);
-    color: var(--white);
+    background-color: var(--teal-500) !important;
+    color: var(--white) !important;
     
     &.active {
       animation: clicked-teal ease-in-out 750ms 0s 1 normal both;
@@ -313,8 +313,8 @@ button.filled:not(.disabled) {
 /* #region CYAN */
 .filled:not(.disabled) {
   &.cyan {
-    background-color: var(--cyan-500);
-    color: var(--white);
+    background-color: var(--cyan-500) !important;
+    color: var(--white) !important;
     
     &.active {
       animation: clicked-cyan ease-in-out 750ms 0s 1 normal both;
@@ -352,8 +352,8 @@ button.filled:not(.disabled) {
 /* #region GRAY */
 .filled:not(.disabled) {
   &.gray {
-    background-color: var(--gray-500);
-    color: var(--black);
+    background-color: var(--gray-500) !important;
+    color: var(--black) !important;
     
     &.active {
       animation: clicked-gray ease-in-out 750ms 0s 1 normal both;
@@ -391,8 +391,8 @@ button.filled:not(.disabled) {
 /* #region LIGHT */
 .filled:not(.disabled) {
   &.light {
-    background-color: var(--light-500);
-    color: var(--gray-500);
+    background-color: var(--light-500) !important;
+    color: var(--gray-500) !important;
     
     &.active {
       animation: clicked-light ease-in-out 750ms 0s 1 normal both;

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

@@ -15,7 +15,7 @@ const Tabs = ({ name, tabs = [], activeTab, onChange, onClose }) => {
         setCurrentTab(stored !== null ? Number(stored) : 0);
         onChange?.(stored !== null ? Number(stored) : 0);
         setIsLoading(false);
-    }, []);
+    }, [name]);
     if (isLoading)
         return React.createElement(Skeleton, { name: name, tabs: tabs });
     return (React.createElement("div", { className: "ar-tabs" },

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

@@ -3,8 +3,10 @@ import "../../../assets/css/components/form/input/styles.css";
 import IProps from "./IProps";
 import Otp from "./otp/Otp";
 import Num from "./num/Num";
+import Phone from "./phone/Phone";
 interface InputCompound extends React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLInputElement>> {
     Number: typeof Num;
+    Phone: typeof Phone;
     Otp: typeof Otp;
 }
 declare const Input: InputCompound;

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

@@ -6,6 +6,7 @@ import Utils from "../../../libs/infrastructure/shared/Utils";
 import { ARIcon } from "../../icons";
 import Otp from "./otp/Otp";
 import Num from "./num/Num";
+import Phone from "./phone/Phone";
 const BaseInput = forwardRef(({ variant = "outlined", color = "light", icon, border = { radius: "sm" }, button, addon, upperCase, validation, ...attributes }, ref) => {
     // refs
     const _innerRef = useRef(null);
@@ -89,6 +90,7 @@ const BaseInput = forwardRef(({ variant = "outlined", color = "light", icon, bor
                         : {}), ...(value
                         ? {
                             style: {
+                                ...attributes.style,
                                 clipPath: `polygon(
                             -15px 0,
                             10px -5px,
@@ -101,7 +103,7 @@ const BaseInput = forwardRef(({ variant = "outlined", color = "light", icon, bor
                           )`,
                             },
                         }
-                        : {}), onChange: (event) => {
+                        : { style: { ...attributes.style } }), onChange: (event) => {
                         // Disabled gelmesi durumunda işlem yapmasına izin verme...
                         if (attributes.disabled)
                             return;
@@ -141,7 +143,8 @@ const BaseInput = forwardRef(({ variant = "outlined", color = "light", icon, bor
         button && React.createElement(Button, { ...button, border: { radius: border.radius }, disabled: attributes.disabled })));
 });
 const Input = BaseInput;
-Input.Otp = Otp;
 Input.Number = Num;
+Input.Phone = Phone;
+Input.Otp = Otp;
 BaseInput.displayName = "Input";
 export default Input;

package/dist/components/form/input/num/Num.js

@@ -71,7 +71,7 @@ const Num = ({ variant, color, name, value, onChange, locale = "tr-TR", digits,
         //   setValue(getFormatter.format(Number(value)));
         //   _firstLoad.current = true;
         // }
-        setValue(getFormatter.format(window.Number(value)));
+        setValue(getFormatter.format(Number(value)));
     }, [value]);
     return (React.createElement(Input, { ref: _input, name: name, variant: variant, color: color, value: _value ?? "", type: "text", inputMode: "decimal", onChange: (event) => {
             // Disabled gelmesi durumunda işlem yapmasına izin verme...

package/dist/components/form/input/phone/IProps.d.ts

@@ -0,0 +1,12 @@
+import { IBorder, IColors, IDisabled, IPlaceholder, IValidation, IVariant } from "../../../../libs/types/IGlobalProps";
+import { Option } from "../../../../libs/types";
+interface IProps extends IVariant, IColors, IBorder, IValidation, IPlaceholder, IDisabled {
+    name: string;
+    values: {
+        option: string;
+        value: string | number | readonly string[] | undefined;
+    };
+    onSelected: (option: Option | undefined) => void;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+}
+export default IProps;

package/dist/components/form/input/phone/IProps.js

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

package/dist/components/form/input/phone/Phone.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import IProps from "./IProps";
+declare const Phone: React.FC<IProps>;
+export default Phone;

package/dist/components/form/input/phone/Phone.js

@@ -0,0 +1,245 @@
+"use client";
+import React, { useEffect, useRef, useState } from "react";
+import Input from "..";
+import Select from "../../select";
+import PhoneMask from "../../../../libs/infrastructure/shared/PhoneMask";
+const options = [
+    // #---- TR
+    { text: "🇹🇷 (+90)", value: "+90" },
+    // #---- OTHER
+    { text: "🇦🇫 (+93)", value: "+93" },
+    { text: "🇦🇱 (+355)", value: "+355" },
+    { text: "🇩🇿 (+213)", value: "+213" },
+    { text: "🇦🇸 (+1)", value: "+1" },
+    { text: "🇦🇩 (+376)", value: "+376" },
+    { text: "🇦🇴 (+244)", value: "+244" },
+    { text: "🇦🇮 (+1)", value: "+1" },
+    { text: "🇦🇬 (+1)", value: "+1" },
+    { text: "🇦🇷 (+54)", value: "+54" },
+    { text: "🇦🇲 (+374)", value: "+374" },
+    { text: "🇦🇼 (+297)", value: "+297" },
+    { text: "🇦🇺 (+61)", value: "+61" },
+    { text: "🇦🇹 (+43)", value: "+43" },
+    { text: "🇦🇿 (+994)", value: "+994" },
+    { text: "🇧🇸 (+1)", value: "+1" },
+    { text: "🇧🇭 (+973)", value: "+973" },
+    { text: "🇧🇩 (+880)", value: "+880" },
+    { text: "🇧🇧 (+1)", value: "+1" },
+    { text: "🇧🇾 (+375)", value: "+375" },
+    { text: "🇧🇪 (+32)", value: "+32" },
+    { text: "🇧🇿 (+501)", value: "+501" },
+    { text: "🇧🇯 (+229)", value: "+229" },
+    { text: "🇧🇲 (+1)", value: "+1" },
+    { text: "🇧🇹 (+975)", value: "+975" },
+    { text: "🇧🇴 (+591)", value: "+591" },
+    { text: "🇧🇦 (+387)", value: "+387" },
+    { text: "🇧🇼 (+267)", value: "+267" },
+    { text: "🇧🇷 (+55)", value: "+55" },
+    { text: "🇧🇳 (+673)", value: "+673" },
+    { text: "🇧🇬 (+359)", value: "+359" },
+    { text: "🇧🇫 (+226)", value: "+226" },
+    { text: "🇧🇮 (+257)", value: "+257" },
+    { text: "🇰🇭 (+855)", value: "+855" },
+    { text: "🇨🇲 (+237)", value: "+237" },
+    { text: "🇨🇦 (+1)", value: "+1" },
+    { text: "🇨🇻 (+238)", value: "+238" },
+    { text: "🇨🇫 (+236)", value: "+236" },
+    { text: "🇹🇩 (+235)", value: "+235" },
+    { text: "🇨🇱 (+56)", value: "+56" },
+    { text: "🇨🇳 (+86)", value: "+86" },
+    { text: "🇨🇴 (+57)", value: "+57" },
+    { text: "🇰🇲 (+269)", value: "+269" },
+    { text: "🇨🇬 (+242)", value: "+242" },
+    { text: "🇨🇷 (+506)", value: "+506" },
+    { text: "🇭🇷 (+385)", value: "+385" },
+    { text: "🇨🇺 (+53)", value: "+53" },
+    { text: "🇨🇾 (+357)", value: "+357" },
+    { text: "🇨🇿 (+420)", value: "+420" },
+    { text: "🇩🇰 (+45)", value: "+45" },
+    { text: "🇩🇯 (+253)", value: "+253" },
+    { text: "🇩🇲 (+1)", value: "+1" },
+    { text: "🇩🇴 (+1)", value: "+1" },
+    { text: "🇪🇨 (+593)", value: "+593" },
+    { text: "🇪🇬 (+20)", value: "+20" },
+    { text: "🇸🇻 (+503)", value: "+503" },
+    { text: "🇪🇪 (+372)", value: "+372" },
+    { text: "🇪🇹 (+251)", value: "+251" },
+    { text: "🇫🇯 (+679)", value: "+679" },
+    { text: "🇫🇮 (+358)", value: "+358" },
+    { text: "🇫🇷 (+33)", value: "+33" },
+    { text: "🇬🇦 (+241)", value: "+241" },
+    { text: "🇬🇲 (+220)", value: "+220" },
+    { text: "🇬🇪 (+995)", value: "+995" },
+    { text: "🇩🇪 (+49)", value: "+49" },
+    { text: "🇬🇭 (+233)", value: "+233" },
+    { text: "🇬🇷 (+30)", value: "+30" },
+    { text: "🇬🇩 (+1)", value: "+1" },
+    { text: "🇬🇹 (+502)", value: "+502" },
+    { text: "🇬🇳 (+224)", value: "+224" },
+    { text: "🇬🇼 (+245)", value: "+245" },
+    { text: "🇬🇾 (+592)", value: "+592" },
+    { text: "🇭🇹 (+509)", value: "+509" },
+    { text: "🇭🇳 (+504)", value: "+504" },
+    { text: "🇭🇰 (+852)", value: "+852" },
+    { text: "🇭🇺 (+36)", value: "+36" },
+    { text: "🇮🇸 (+354)", value: "+354" },
+    { text: "🇮🇳 (+91)", value: "+91" },
+    { text: "🇮🇩 (+62)", value: "+62" },
+    { text: "🇮🇷 (+98)", value: "+98" },
+    { text: "🇮🇶 (+964)", value: "+964" },
+    { text: "🇮🇪 (+353)", value: "+353" },
+    { text: "🇮🇱 (+972)", value: "+972" },
+    { text: "🇮🇹 (+39)", value: "+39" },
+    { text: "🇨🇮 (+225)", value: "+225" },
+    { text: "🇯🇲 (+1)", value: "+1" },
+    { text: "🇯🇵 (+81)", value: "+81" },
+    { text: "🇯🇴 (+962)", value: "+962" },
+    { text: "🇰🇿 (+7)", value: "+7" },
+    { text: "🇰🇪 (+254)", value: "+254" },
+    { text: "🇰🇮 (+686)", value: "+686" },
+    { text: "🇰🇼 (+965)", value: "+965" },
+    { text: "🇰🇬 (+996)", value: "+996" },
+    { text: "🇱🇦 (+856)", value: "+856" },
+    { text: "🇱🇻 (+371)", value: "+371" },
+    { text: "🇱🇧 (+961)", value: "+961" },
+    { text: "🇱🇸 (+266)", value: "+266" },
+    { text: "🇱🇷 (+231)", value: "+231" },
+    { text: "🇱🇾 (+218)", value: "+218" },
+    { text: "🇱🇹 (+370)", value: "+370" },
+    { text: "🇱🇺 (+352)", value: "+352" },
+    { text: "🇲🇰 (+389)", value: "+389" },
+    { text: "🇲🇬 (+261)", value: "+261" },
+    { text: "🇲🇼 (+265)", value: "+265" },
+    { text: "🇲🇾 (+60)", value: "+60" },
+    { text: "🇲🇻 (+960)", value: "+960" },
+    { text: "🇲🇱 (+223)", value: "+223" },
+    { text: "🇲🇹 (+356)", value: "+356" },
+    { text: "🇲🇷 (+222)", value: "+222" },
+    { text: "🇲🇺 (+230)", value: "+230" },
+    { text: "🇲🇽 (+52)", value: "+52" },
+    { text: "🇫🇲 (+691)", value: "+691" },
+    { text: "🇲🇩 (+373)", value: "+373" },
+    { text: "🇲🇨 (+377)", value: "+377" },
+    { text: "🇲🇳 (+976)", value: "+976" },
+    { text: "🇲🇪 (+382)", value: "+382" },
+    { text: "🇲🇦 (+212)", value: "+212" },
+    { text: "🇲🇿 (+258)", value: "+258" },
+    { text: "🇲🇲 (+95)", value: "+95" },
+    { text: "🇳🇦 (+264)", value: "+264" },
+    { text: "🇳🇷 (+674)", value: "+674" },
+    { text: "🇳🇵 (+977)", value: "+977" },
+    { text: "🇳🇱 (+31)", value: "+31" },
+    { text: "🇳🇿 (+64)", value: "+64" },
+    { text: "🇳🇮 (+505)", value: "+505" },
+    { text: "🇳🇪 (+227)", value: "+227" },
+    { text: "🇳🇬 (+234)", value: "+234" },
+    { text: "🇳🇺 (+683)", value: "+683" },
+    { text: "🇰🇵 (+850)", value: "+850" },
+    { text: "🇲🇵 (+1)", value: "+1" },
+    { text: "🇳🇴 (+47)", value: "+47" },
+    { text: "🇴🇲 (+968)", value: "+968" },
+    { text: "🇵🇰 (+92)", value: "+92" },
+    { text: "🇵🇼 (+680)", value: "+680" },
+    { text: "🇵🇦 (+507)", value: "+507" },
+    { text: "🇵🇬 (+675)", value: "+675" },
+    { text: "🇵🇾 (+595)", value: "+595" },
+    { text: "🇵🇪 (+51)", value: "+51" },
+    { text: "🇵🇭 (+63)", value: "+63" },
+    { text: "🇵🇱 (+48)", value: "+48" },
+    { text: "🇵🇹 (+351)", value: "+351" },
+    { text: "🇶🇦 (+974)", value: "+974" },
+    { text: "🇷🇴 (+40)", value: "+40" },
+    { text: "🇷🇺 (+7)", value: "+7" },
+    { text: "🇷🇼 (+250)", value: "+250" },
+    { text: "🇰🇳 (+1)", value: "+1" },
+    { text: "🇱🇨 (+1)", value: "+1" },
+    { text: "🇻🇨 (+1)", value: "+1" },
+    { text: "🇼🇸 (+685)", value: "+685" },
+    { text: "🇸🇲 (+378)", value: "+378" },
+    { text: "🇸🇹 (+239)", value: "+239" },
+    { text: "🇸🇦 (+966)", value: "+966" },
+    { text: "🇸🇳 (+221)", value: "+221" },
+    { text: "🇷🇸 (+381)", value: "+381" },
+    { text: "🇸🇨 (+248)", value: "+248" },
+    { text: "🇸🇱 (+232)", value: "+232" },
+    { text: "🇸🇬 (+65)", value: "+65" },
+    { text: "🇸🇰 (+421)", value: "+421" },
+    { text: "🇸🇮 (+386)", value: "+386" },
+    { text: "🇸🇧 (+677)", value: "+677" },
+    { text: "🇸🇴 (+252)", value: "+252" },
+    { text: "🇿🇦 (+27)", value: "+27" },
+    { text: "🇰🇷 (+82)", value: "+82" },
+    { text: "🇸🇸 (+211)", value: "+211" },
+    { text: "🇪🇸 (+34)", value: "+34" },
+    { text: "🇱🇰 (+94)", value: "+94" },
+    { text: "🇸🇩 (+249)", value: "+249" },
+    { text: "🇸🇷 (+597)", value: "+597" },
+    { text: "🇸🇪 (+46)", value: "+46" },
+    { text: "🇨🇭 (+41)", value: "+41" },
+    { text: "🇸🇾 (+963)", value: "+963" },
+    { text: "🇹🇯 (+992)", value: "+992" },
+    { text: "🇹🇿 (+255)", value: "+255" },
+    { text: "🇹🇭 (+66)", value: "+66" },
+    { text: "🇹🇱 (+670)", value: "+670" },
+    { text: "🇹🇬 (+228)", value: "+228" },
+    { text: "🇹🇴 (+676)", value: "+676" },
+    { text: "🇹🇹 (+1)", value: "+1" },
+    { text: "🇹🇳 (+216)", value: "+216" },
+    { text: "🇹🇲 (+993)", value: "+993" },
+    { text: "🇹🇻 (+688)", value: "+688" },
+    { text: "🇺🇬 (+256)", value: "+256" },
+    { text: "🇺🇦 (+380)", value: "+380" },
+    { text: "🇦🇪 (+971)", value: "+971" },
+    { text: "🇬🇧 (+44)", value: "+44" },
+    { text: "🇺🇸 (+1)", value: "+1" },
+    { text: "🇺🇾 (+598)", value: "+598" },
+    { text: "🇺🇿 (+998)", value: "+998" },
+    { text: "🇻🇺 (+678)", value: "+678" },
+    { text: "🇻🇦 (+379)", value: "+379" },
+    { text: "🇻🇪 (+58)", value: "+58" },
+    { text: "🇻🇳 (+84)", value: "+84" },
+    { text: "🇾🇪 (+967)", value: "+967" },
+    { text: "🇿🇲 (+260)", value: "+260" },
+    { text: "🇿🇼 (+263)", value: "+263" },
+];
+const Phone = ({ variant, color, name, values, onSelected, onChange, placeholder, validation, disabled, }) => {
+    // refs
+    const _input = useRef(null);
+    // states
+    const [_value, setValue] = useState("");
+    const [selected, setSelected] = useState(undefined);
+    // methods
+    const handleClick = () => {
+        const input = _input.current;
+        if (!input)
+            return;
+        const caret = input.selectionStart ?? 0;
+        input.setSelectionRange(caret, caret + 1);
+    };
+    const handleChange = (event) => {
+        if (disabled)
+            return;
+        const { value } = event.target;
+        setValue(value);
+        onChange?.({
+            ...event,
+            target: {
+                ...event.target,
+                name,
+                value: value.replace(/\D/g, ""),
+            },
+        });
+    };
+    // useEffects
+    useEffect(() => {
+        setValue(values.value);
+        setSelected(options.find((option) => option.value === values.option));
+    }, [values]);
+    return (React.createElement("div", { className: "ar-input-phone-wrapper" },
+        React.createElement(Select, { style: { width: 130 }, variant: "outlined", color: "light", options: options.sort((a, b) => Number(a.value.replace("+", "")) - Number(b.value.replace("+", ""))), value: selected, onChange: (option) => {
+                onSelected(option);
+                setSelected(option);
+            } }),
+        React.createElement(Input, { ref: _input, name: name, variant: variant, color: color, value: PhoneMask.FormatByMask(selected?.value, _value), type: "tel", inputMode: "decimal", onChange: handleChange, onClick: handleClick, placeholder: placeholder, validation: validation, disabled: disabled })));
+};
+export default Phone;

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

@@ -1,28 +1,6 @@
 import { Variants, Option, Status, Color } from "../../../libs/types";
 import { IBorder, IDisabled, IIcon, ISize, IColors, IUpperCase, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
 export interface IMultiple {
-    /**
-     * Bileşenin durum (status) ayarlarını belirtir.
-     *
-     * - `color`: Genel durum rengini belirler. `Status` tipi ile tanımlanır (örneğin "success", "error" vb.).
-     * - `selected`: Seçili öğelerin görünümüyle ilgili ayarlar.
-     *   - `variant`: Seçili öğenin stil varyantı (`Variants` tipi).
-     *   - `color`: Seçili öğenin durumu için renk (`Status` tipi).
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Select
-     *   status={{
-     *     color: "warning",
-     *     selected: {
-     *       variant: "outlined",
-     *       color: "success",
-     *     },
-     *   }}
-     * />
-     * ```
-     */
     status?: {
         color?: Color;
         selected?: {
@@ -30,112 +8,21 @@ export interface IMultiple {
             color?: Color;
         };
     };
-    /**
-     * Bileşenin seçtiği değerlerin listesi.
-     *
-     * Çoklu seçim için `Option` tipinden bir dizi kullanılır.
-     */
     value: Option[];
-    /**
-     * Seçimler değiştiğinde çağrılan olaydır.
-     *
-     * Yeni seçili seçenekler `Option[]` olarak parametreye geçer.
-     */
     onChange: (option: Option[]) => void;
-    /**
-     * Bileşenin çoklu seçim modunda olduğunu belirtir.
-     *
-     * Sabit `true` değeri ile tanımlanır.
-     */
     multiple: true;
 }
 export interface ISingle {
-    /**
-     * Bileşenin durumunu belirtir.
-     *
-     * `Status` tipi ile tanımlanır (örneğin "success", "error", "warning" vb.).
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Select status="success" />
-     * ```
-     */
     status?: Status;
-    /**
-     * Bileşenin seçili değeri.
-     *
-     * Tekli seçimde, `Option` tipi ya da seçilmemişse `undefined` olabilir.
-     */
     value: Option | undefined;
-    /**
-     * Seçim değiştiğinde tetiklenen olaydır.
-     *
-     * Yeni seçilen değer `Option` tipi ya da seçilmemişse `undefined` olarak gelir.
-     */
     onChange: (option: Option | undefined) => void;
-    /**
-     * Bileşenin çoklu seçim modunda olmadığını belirtir.
-     *
-     * `false` veya belirtilmemiş olabilir.
-     */
     multiple?: false;
 }
 export type Props = {
-    /**
-     * Seçilebilir seçeneklerin listesi.
-     *
-     * `Option` tipi elemanlardan oluşan bir dizi olmalıdır.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Select options={[{label: "...", value: "..."}]} />
-     * ```
-     */
+    style?: React.CSSProperties | undefined;
     options: Option[];
-    /**
-     * Arama alanına bir metin girildiğinde tetiklenen olaydır.
-     *
-     * - `searchText`: Kullanıcının yazdığı arama metni.,
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Select onSearch={(searchText) => console.log(searchText)} />
-     * ```
-     */
     onSearch?: (searchText: string) => void;
-    /**
-     * Bileşen üzerine tıklandığında tetiklenen olaydır.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Select onClick={() => {...}} />
-     * ```
-     */
     onClick?: () => void;
-    /**
-     * Yeni bir seçenek oluşturulduğunda tetiklenen olaydır.
-     *
-     * - `option`: Oluşturulan yeni `Option` nesnesi.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Select onCreate={(option) => console.log(option)} />
-     * ```
-     */
     onCreate?: (option: Option) => void;
-    /**
-     * Bileşenin içinde gösterilecek yer tutucu (placeholder) metni.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Select placeholder="..." />
-     * ```
-     */
     placeholder?: string;
 } & (IMultiple | ISingle) & IVariant & IColors & IBorder & IIcon & ISize & IUpperCase & IValidation & IDisabled;

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

@@ -6,7 +6,7 @@ import Chip from "../../data-display/chip";
 import Checkbox from "../checkbox";
 import Utils from "../../../libs/infrastructure/shared/Utils";
 import ReactDOM from "react-dom";
-const Select = ({ variant = "outlined", status, color, border = { radius: "sm" }, options, value, onChange, onSearch, onClick, onCreate, multiple, placeholder, validation, upperCase, disabled, }) => {
+const Select = ({ variant = "outlined", status, color, border = { radius: "sm" }, style, options, value, onChange, onSearch, onClick, onCreate, multiple, placeholder, validation, upperCase, disabled, }) => {
     const _selectionClassName = ["selections"];
     // refs
     const _arSelect = useRef(null);
@@ -279,7 +279,7 @@ const Select = ({ variant = "outlined", status, color, border = { radius: "sm" }
                     React.createElement("div", { className: "items" }, value.map((_value, index) => (React.createElement(Chip, { key: index, variant: status?.selected?.variant || "filled", color: status?.selected?.color || status?.color, text: _value.text }))))),
                 React.createElement("span", { ref: _placeholder, className: `placeholder ${value.length > 0 ? "visible" : "hidden"}` },
                     validation ? "* " : "",
-                    placeholder))) : (React.createElement(Input, { ref: _singleInput, variant: variant, color: !Utils.IsNullOrEmpty(validation?.text) ? "red" : color, 
+                    placeholder))) : (React.createElement(Input, { ref: _singleInput, style: style, variant: variant, color: !Utils.IsNullOrEmpty(validation?.text) ? "red" : color, 
                 // status={!Utils.IsNullOrEmpty(validation?.text) ? "danger" : status}
                 border: { radius: border.radius }, value: singleInputText, onClick: () => {
                     onClick && onClick();

package/dist/libs/core/application/hooks/index.js

@@ -136,7 +136,8 @@ export const useValidation = function (data, params, step) {
                 setError(key, Utils.StringFormat(s.message, s.value), param.step, index);
             }
             // Regexes
-            const phoneRegex = /^((\+90|0)?([2-5]\d{2})\d{7}|\+[1-9]\d{7,14})$/;
+            // const phoneRegex = /^((\+90|0)?([2-5]\d{2})\d{7}|\+[1-9]\d{7,14})$/;
+            const phoneRegex = /^\d{7,14}$/;
             const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
             const ibanRegex = /^TR\d{24}$/;
             const accountNumberRegex = /^\d{6,16}$/;

package/dist/libs/infrastructure/shared/PhoneMask.d.ts

@@ -0,0 +1,8 @@
+declare class PhoneMask {
+    FormatByMask: (code: string, value: string) => string;
+    private GetMaskByCountry;
+    private countryMasks;
+    private GenerateMask;
+}
+declare const _default: PhoneMask;
+export default _default;

package/dist/libs/infrastructure/shared/PhoneMask.js

@@ -0,0 +1,60 @@
+class PhoneMask {
+    FormatByMask = (code, value) => {
+        const mask = this.GetMaskByCountry(code ?? "+90");
+        const digits = value.replace(/\D/g, "");
+        let result = "";
+        let i = 0;
+        for (const char of mask) {
+            if (char === "9") {
+                if (!digits[i])
+                    break;
+                result += digits[i++];
+            }
+            else {
+                result += char;
+            }
+        }
+        return result;
+    };
+    GetMaskByCountry(countryCode, length) {
+        if (countryCode && this.countryMasks[countryCode]) {
+            return this.countryMasks[countryCode];
+        }
+        // fallback: length varsa ona göre üret, yoksa 10 ile varsayılan
+        return this.GenerateMask(length ?? 10);
+    }
+    countryMasks = {
+        "+90": "999 999 99 99", // Türkiye
+        "+1": "999 999 9999", // ABD / Kanada
+        "+44": "9999 999999", // İngiltere
+        "+49": "9999 9999999", // Almanya
+        "+33": "9 99 99 99 99", // Fransa
+        "+39": "999 999 9999", // İtalya
+        "+34": "999 999 999", // İspanya
+        "+351": "999 999 999", // Portekiz
+        "+31": "9 99999999", // Hollanda
+        "+32": "999 99 99 99", // Belçika
+        "+41": "99 999 99 99", // İsviçre
+        "+7": "999 999 99 99", // Rusya / Kazakistan
+        "+91": "99999 99999", // Hindistan
+        "+86": "999 9999 9999", // Çin
+        "+81": "99 9999 9999", // Japonya
+        "+82": "99 9999 9999", // Güney Kore
+        "+61": "9 9999 9999", // Avustralya
+        "+55": "99 99999 9999", // Brezilya
+        "+52": "999 999 9999", // Meksika
+        "+54": "99 9999 9999", // Arjantin
+    };
+    // length parametresi ile otomatik maske üret
+    GenerateMask(length) {
+        if (length <= 0)
+            return "";
+        const max = Math.min(length, 15); // E.164 max
+        const groups = max <= 10 ? [3, 3, max - 6] : [3, 3, 4, max - 10];
+        return groups
+            .filter((g) => g > 0)
+            .map((g) => "9".repeat(g))
+            .join(" ");
+    }
+}
+export default new PhoneMask();

package/package.json

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