ar-design 0.3.67 → 0.3.69

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

@@ -0,0 +1,20 @@
+.ar-input-otp-wrapper {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+
+  > span {
+    > .ar-input-wrapper {
+      > .ar-input {
+        > .input {
+          > input {
+            text-align: center !important;
+          }
+        }
+      }
+    }
+  }
+}

package/dist/assets/css/components/form/input/{input.css → styles.css}

@@ -101,6 +101,9 @@
   }
 }
 
+/* OTP */
+@import url("./otp/styles.css");
+
 /* Core Css */
 @import url("./core/icon.css");
 @import url("./core/border.css");

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

@@ -3,7 +3,6 @@ import React, { useState } from "react";
 import Input from "../../form/input";
 import DatePicker from "../../form/date-picker";
 import Select from "../../form/select";
-import InputNumber from "../../form/input-number";
 const Editable = function ({ c, item, index, onEditable, validation }) {
     const key = c.key;
     const itemValue = item[c.key];
@@ -23,7 +22,7 @@ const Editable = function ({ c, item, index, onEditable, validation }) {
                     onEditable({ ...item, [key]: c.editable?.type === "number" ? Number(value) : value }, index);
                 }, validation: { text: _vText } }));
         case "input-number":
-            return (React.createElement(InputNumber, { variant: "borderless", name: c.key, value: value, onChange: (event) => {
+            return (React.createElement(Input.Number, { variant: "borderless", name: c.key, value: value, onChange: (event) => {
                     const { value } = event.target;
                     setValue(value);
                     onEditable({ ...item, [key]: c.editable?.type === "number" ? Number(value) : value }, index);

package/dist/components/form/date-picker/Props.d.ts

@@ -1,7 +1,7 @@
-import { IBorder, IColors, ISize, IStatus, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
+import { IBorder, IColors, IStatus, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
 type Props = {
     label?: string;
     isClock?: boolean;
     onChange: (value: string) => void;
-} & IVariant & IColors & IStatus & IBorder & ISize & IValidation & Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "onChange" | "size" | "color">;
+} & IVariant & IColors & IStatus & IBorder & IValidation & Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "onChange" | "color">;
 export default Props;

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

@@ -1,7 +1,7 @@
 import IButtonProps from "../button/IProps";
 import { Variants } from "../../../libs/types";
-import { IBorder, IColors, IIcon, ISize, IUpperCase, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
-interface IProps extends IVariant, IColors, IBorder, IIcon, ISize, IUpperCase, IValidation, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "size" | "color"> {
+import { IBorder, IColors, IIcon, IUpperCase, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
+interface IProps extends IVariant, IColors, IBorder, IIcon, IUpperCase, IValidation, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "color"> {
     button?: Omit<IButtonProps, "size" | "shape" | "position" | "fullWidth">;
     addon?: {
         variant?: Variants;

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

@@ -1,5 +1,11 @@
 import React from "react";
-import "../../../assets/css/components/form/input/input.css";
+import "../../../assets/css/components/form/input/styles.css";
 import IProps from "./IProps";
-declare const Input: React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLInputElement>>;
+import Otp from "./otp/Otp";
+import Num from "./num";
+interface InputCompound extends React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLInputElement>> {
+    Number: typeof Num;
+    Otp: typeof Otp;
+}
+declare const Input: InputCompound;
 export default Input;

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

@@ -1,10 +1,12 @@
 "use client";
 import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
-import "../../../assets/css/components/form/input/input.css";
+import "../../../assets/css/components/form/input/styles.css";
 import Button from "../button";
 import Utils from "../../../libs/infrastructure/shared/Utils";
 import { ARIcon } from "../../icons";
-const Input = forwardRef(({ variant = "outlined", color = "light", size = "normal", icon, border = { radius: "sm" }, button, addon, upperCase, validation, ...attributes }, ref) => {
+import Otp from "./otp/Otp";
+import Num from "./num";
+const BaseInput = forwardRef(({ variant = "outlined", color = "light", icon, border = { radius: "sm" }, button, addon, upperCase, validation, ...attributes }, ref) => {
     // refs
     const _innerRef = useRef(null);
     const _label = useRef(null);
@@ -18,7 +20,7 @@ const Input = forwardRef(({ variant = "outlined", color = "light", size = "norma
     const _inputClassName = [];
     const _addonBeforeClassName = ["addon-before"];
     const _addonAfterClassName = ["addon-after"];
-    _inputClassName.push(...Utils.GetClassName(variant, undefined, !Utils.IsNullOrEmpty(validation?.text) ? "red" : color, border, size, icon, attributes.className));
+    _inputClassName.push(...Utils.GetClassName(variant, undefined, !Utils.IsNullOrEmpty(validation?.text) ? "red" : color, border, undefined, icon, attributes.className));
     // addon className
     if (addon) {
         _wrapperClassName.push("addon");
@@ -75,7 +77,7 @@ const Input = forwardRef(({ variant = "outlined", color = "light", size = "norma
                 validation && "* ",
                 attributes.placeholder)),
             React.createElement("div", { className: "input" },
-                React.createElement("input", { ref: _innerRef, ...attributes, type: attributes.type === "number" ? "text" : attributes.type, placeholder: `${validation ? "* " : ""}${attributes.placeholder ?? ""}`, value: value ?? attributes.value, size: 20, className: _inputClassName.map((c) => c).join(" "), ...(attributes.type === "number"
+                React.createElement("input", { ref: _innerRef, ...attributes, type: attributes.type === "number" ? "text" : attributes.type, placeholder: `${validation ? "* " : ""}${attributes.placeholder ?? ""}`, value: value ?? attributes.value, size: attributes.size || 20, className: _inputClassName.map((c) => c).join(" "), ...(attributes.type === "number"
                         ? {
                             onKeyDown: (event) => {
                                 const allowedKeys = ["Backspace", "Tab", "ArrowLeft", "ArrowRight", "Delete"];
@@ -138,5 +140,8 @@ const Input = forwardRef(({ variant = "outlined", color = "light", size = "norma
         addon?.after && React.createElement("span", { className: _addonAfterClassName.map((c) => c).join(" ") }, addon?.after),
         button && React.createElement(Button, { ...button, border: { radius: border.radius }, disabled: attributes.disabled })));
 });
-Input.displayName = "Input";
+const Input = BaseInput;
+Input.Otp = Otp;
+Input.Number = Num;
+BaseInput.displayName = "Input";
 export default Input;

package/dist/components/form/{input-number → input/num}/IProps.d.ts

@@ -1,4 +1,4 @@
-import { IBorder, IColors, IDisabled, IPlaceholder, IUpperCase, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
+import { IBorder, IColors, IDisabled, IPlaceholder, IUpperCase, IValidation, IVariant } from "../../../../libs/types/IGlobalProps";
 interface IProps extends IVariant, IColors, IBorder, IUpperCase, IValidation, IPlaceholder, IDisabled {
     name: string;
     value: string | number | readonly string[] | undefined;

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

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

package/dist/components/form/{input-number → input/num}/index.js

@@ -1,8 +1,8 @@
 "use client";
 import React, { useEffect, useMemo, useRef, useState } from "react";
-import Input from "../input";
-import { NUMBER } from "../../../libs/infrastructure/shared";
-const InputNumber = ({ variant, color, name, value, onChange, locale = "tr-TR", digits, placeholder, validation, disabled, }) => {
+import Input from "..";
+import { NUMBER } from "../../../../libs/infrastructure/shared";
+const Num = ({ variant, color, name, value, onChange, locale = "tr-TR", digits, placeholder, validation, disabled, }) => {
     // refs
     // const _firstLoad = useRef<boolean>(false);
     const _input = useRef(null);
@@ -71,7 +71,7 @@ const InputNumber = ({ variant, color, name, value, onChange, locale = "tr-TR",
         //   setValue(getFormatter.format(Number(value)));
         //   _firstLoad.current = true;
         // }
-        setValue(getFormatter.format(Number(value)));
+        setValue(getFormatter.format(window.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...
@@ -80,4 +80,4 @@ const InputNumber = ({ variant, color, name, value, onChange, locale = "tr-TR",
             handleChange(event);
         }, onClick: handleClick, onKeyUp: handleKeyUp, placeholder: placeholder, validation: validation, disabled: disabled }));
 };
-export default InputNumber;
+export default Num;

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

@@ -0,0 +1,6 @@
+import { IColors, IVariant } from "../../../../libs/types/IGlobalProps";
+interface IProps extends IVariant, IColors, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "color"> {
+    character: number;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+}
+export default IProps;

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

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

package/dist/components/form/input/otp/Otp.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import IProps from "./IProps";
+declare const Otp: {
+    ({ character, onChange, ...attributes }: IProps): React.JSX.Element;
+    displayName: string;
+};
+export default Otp;

package/dist/components/form/input/otp/Otp.js

@@ -0,0 +1,67 @@
+"use client";
+import React, { useRef, useCallback } from "react";
+import Input from "..";
+const Otp = ({ character, onChange, ...attributes }) => {
+    // refs
+    const _inputs = useRef([]);
+    const _value = useRef({});
+    // methods
+    const handleInput = useCallback((index) => (event) => {
+        if (attributes.disabled)
+            return;
+        let { value } = event.currentTarget;
+        _value.current = { ..._value.current, [index]: value };
+        if (value.length >= 1) {
+            _inputs.current[index + 1]?.focus();
+            _inputs.current[index + 1]?.select();
+        }
+        onChange?.({
+            ...event,
+            target: {
+                ...event.currentTarget,
+                name: attributes.name ?? "",
+                value: Object.keys(_value.current)
+                    .sort((a, b) => Number(a) - Number(b))
+                    .map((key) => _value.current[Number(key)])
+                    .join(""),
+            },
+        });
+    }, [onChange, attributes.name, attributes.disabled]);
+    const handleKeyUp = useCallback((index) => (event) => {
+        const input = event.currentTarget;
+        const { value } = input;
+        const lastChar = value.slice(-1);
+        event.currentTarget.value = lastChar;
+        if (event.key === "Backspace" && value.length === 0) {
+            _inputs.current[index - 1]?.focus();
+            _inputs.current[index - 1]?.select();
+        }
+    }, []);
+    const handleKeyDown = (index) => (event) => {
+        if (index === 0 && (event.key === "ArrowDown" || event.key === "ArrowLeft"))
+            event.preventDefault();
+        if (index + 1 >= character && (event.key === "ArrowUp" || event.key === "ArrowRight"))
+            event.preventDefault();
+        if (!/[0-9]/.test(event.key) && event.key.length === 1)
+            event.preventDefault();
+        if (event.key === "ArrowDown" || event.key === "ArrowLeft") {
+            _inputs.current[index - 1]?.focus();
+            setTimeout(() => _inputs.current[index - 1]?.select(), 0);
+        }
+        else if (event.key === "ArrowUp" || event.key === "ArrowRight") {
+            _inputs.current[index + 1]?.focus();
+            setTimeout(() => _inputs.current[index + 1]?.select(), 0);
+        }
+    };
+    const handleClick = useCallback((event) => {
+        const input = event.currentTarget;
+        if (document.activeElement === input)
+            input.select();
+    }, []);
+    return (React.createElement("div", { className: "ar-input-otp-wrapper" }, Array.from({ length: character }, (_, index) => (React.createElement("span", { key: index },
+        React.createElement(Input, { ref: (el) => {
+                _inputs.current[index] = el;
+            }, ...attributes, value: _value.current[index] ?? "", onInput: handleInput(index), onKeyUp: handleKeyUp(index), onKeyDown: handleKeyDown(index), onFocus: (event) => event.target.select(), onClick: handleClick, size: 1, placeholder: undefined, autoFocus: index === 0, autoComplete: "off" }))))));
+};
+Otp.displayName = "Input.Otp";
+export default Otp;

package/dist/components/form/input-tag/IProps.d.ts

@@ -1,4 +1,4 @@
-import { IBorder, IIcon, ISize, IStatus, IUpperCase, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
-interface IProps extends IVariant, IStatus, IBorder, IIcon, ISize, IUpperCase, IValidation, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "size" | "color"> {
+import { IBorder, IIcon, IStatus, IUpperCase, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
+interface IProps extends IVariant, IStatus, IBorder, IIcon, IUpperCase, IValidation, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "color"> {
 }
 export default IProps;

package/dist/index.d.ts

@@ -5,7 +5,6 @@ import ButtonGroup from "./components/form/button-group";
 import Checkbox from "./components/form/checkbox";
 import DatePicker from "./components/form/date-picker";
 import Input from "./components/form/input";
-import InputNumber from "./components/form/input-number";
 import InputTag from "./components/form/input-tag";
 import Radio from "./components/form/radio";
 import Select from "./components/form/select";
@@ -35,4 +34,4 @@ import Pagination from "./components/navigation/pagination";
 import Steps from "./components/navigation/steps";
 import Grid from "./components/data-display/grid-system";
 import Layout from "./components/layout";
-export { Button, ButtonAction, ButtonGroup, Checkbox, DatePicker, Input, InputNumber, InputTag, Radio, Select, Switch, TextEditor, Upload, Card, Chip, Diagram, Divider, DnD, KanbanBoard, Paper, SyntaxHighlighter, Table, Tabs, Typography, Alert, Drawer, Modal, Popover, Progress, Tooltip, Breadcrumb, Menu, Pagination, Steps, Grid, Layout, };
+export { Button, ButtonAction, ButtonGroup, Checkbox, DatePicker, Input, InputTag, Radio, Select, Switch, TextEditor, Upload, Card, Chip, Diagram, Divider, DnD, KanbanBoard, Paper, SyntaxHighlighter, Table, Tabs, Typography, Alert, Drawer, Modal, Popover, Progress, Tooltip, Breadcrumb, Menu, Pagination, Steps, Grid, Layout, };

package/dist/index.js

@@ -6,7 +6,6 @@ import ButtonGroup from "./components/form/button-group";
 import Checkbox from "./components/form/checkbox";
 import DatePicker from "./components/form/date-picker";
 import Input from "./components/form/input";
-import InputNumber from "./components/form/input-number";
 import InputTag from "./components/form/input-tag";
 import Radio from "./components/form/radio";
 import Select from "./components/form/select";
@@ -42,7 +41,7 @@ import Grid from "./components/data-display/grid-system";
 import Layout from "./components/layout";
 export { 
 // Form Elements
-Button, ButtonAction, ButtonGroup, Checkbox, DatePicker, Input, InputNumber, InputTag, Radio, Select, Switch, TextEditor, Upload, 
+Button, ButtonAction, ButtonGroup, Checkbox, DatePicker, Input, InputTag, Radio, Select, Switch, TextEditor, Upload, 
 // Data Display
 Card, Chip, Diagram, Divider, DnD, KanbanBoard, Paper, SyntaxHighlighter, Table, Tabs, Typography, 
 // Feedback

package/package.json

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

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

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