ar-design 0.1.34 → 0.1.36

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

@@ -10,7 +10,8 @@
 
 .ar-select-wrapper > .ar-select > .angel-down {
   position: absolute;
-  top: 50%;
+  top: calc(var(--input-height) / 2);
+  transform: translateY(-50%);
   right: 0.5rem;
   width: 0.75rem;
   height: 0.75rem;
@@ -44,7 +45,7 @@
 
 .ar-select-wrapper > .ar-select > .button-clear {
   position: absolute;
-  top: 50%;
+  top: calc(var(--input-height) / 2);
   transform: translateY(-50%);
   right: 2rem;
   background-color: rgba(var(--black-rgb), 0.25);
@@ -100,4 +101,10 @@
   border-radius: var(--border-radius-sm);
 }
 
+.ar-select-wrapper > .ar-select > .validation {
+  color: var(--danger);
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+
 @import url("./options.css");

package/dist/assets/css/components/navigation/steps/steps.css

@@ -4,6 +4,9 @@
   display: flex;
   flex-direction: row;
   justify-content: space-around;
+  margin-bottom: 2.5rem;
+  padding-bottom: 2.5rem;
+  border-bottom: solid 4px var(--gray-100);
 }
 .ar-steps > .steps > .item {
   position: relative;

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

@@ -1,7 +1,7 @@
 /* #region PRIMARY */
 .outlined:not(.disabled).primary {
   border-color: var(--primary);
-  color: var(--primary);
+  /* color: var(--primary); */
 }
 .outlined:not(.disabled).primary:hover {
   border-color: rgba(var(--primary-rgb), 0.5);
@@ -23,7 +23,7 @@ input[type="checkbox"]:checked + span > .ar-checkbox.outlined:not(.disabled).pri
 /* #region SECONDARY */
 .outlined:not(.disabled).secondary {
   border-color: var(--secondary);
-  color: var(--secondary);
+  /* color: var(--secondary); */
 }
 .outlined:not(.disabled).secondary:hover {
   border-color: rgba(var(--secondary-rgb), 0.5);
@@ -45,7 +45,7 @@ input[type="checkbox"]:checked + span > .ar-checkbox.outlined:not(.disabled).sec
 /* #region SUCCESS */
 .outlined:not(.disabled).success {
   border-color: var(--success);
-  color: var(--success);
+  /* color: var(--success); */
 }
 .outlined:not(.disabled).success:hover {
   border-color: rgba(var(--success-rgb), 0.5);
@@ -67,7 +67,7 @@ input[type="checkbox"]:checked + span > .ar-checkbox.outlined:not(.disabled).suc
 /* #region WARNING */
 .outlined:not(.disabled).warning {
   border-color: var(--warning);
-  color: var(--warning);
+  /* color: var(--warning); */
 }
 .outlined:not(.disabled).warning:hover {
   border-color: rgba(var(--warning-rgb), 0.5);
@@ -89,7 +89,7 @@ input[type="checkbox"]:checked + span > .ar-checkbox.outlined:not(.disabled).war
 /* #region DANGER */
 .outlined:not(.disabled).danger {
   border-color: var(--danger);
-  color: var(--danger);
+  /* color: var(--danger); */
 }
 .outlined:not(.disabled).danger:hover {
   border-color: rgba(var(--danger-rgb), 0.5);
@@ -111,7 +111,7 @@ input[type="checkbox"]:checked + span > .ar-checkbox.outlined:not(.disabled).dan
 /* #region INFORMATION */
 .outlined:not(.disabled).information {
   border-color: var(--information);
-  color: var(--information);
+  /* color: var(--information); */
 }
 .outlined:not(.disabled).information:hover {
   border-color: rgba(var(--information-rgb), 0.5);
@@ -133,7 +133,7 @@ input[type="checkbox"]:checked + span > .ar-checkbox.outlined:not(.disabled).inf
 /* #region DARK */
 .outlined:not(.disabled).dark {
   border-color: var(--dark);
-  color: var(--dark);
+  /* color: var(--dark); */
 }
 .outlined:not(.disabled).dark:hover {
   border-color: rgba(var(--dark-rgb), 0.5);
@@ -155,7 +155,7 @@ input[type="checkbox"]:checked + span > .ar-checkbox.outlined:not(.disabled).dar
 /* #region LIGHT */
 .outlined:not(.disabled).light {
   border-color: var(--light);
-  color: var(--dark);
+  /* color: var(--dark); */
 }
 .outlined:not(.disabled).light:hover {
   border-color: rgba(var(--light-rgb), 0.5);

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

@@ -10,7 +10,8 @@ interface IProps<T> extends IChildren {
         onChange: (currentPage: number) => void;
     };
     config?: {
-        isServer: boolean;
+        isServer?: boolean;
+        isSearchable?: boolean;
         scroll?: {
             maxHeight: number;
         };

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

@@ -136,8 +136,8 @@ const Table = function ({ children, data, columns, selections, pagination, confi
     }, [currentPage]);
     return (React.createElement("div", { ref: _tableWrapper, className: _tableClassName.map((c) => c).join(" ") },
         React.createElement("div", { className: "header" },
-            React.createElement("div", null,
-                React.createElement(Input, { placeholder: "Ara", onChange: (event) => setSearchedText(event.target.value.toLowerCase()) })),
+            config?.isSearchable && (React.createElement("div", null,
+                React.createElement(Input, { placeholder: "Ara", onChange: (event) => setSearchedText(event.target.value.toLowerCase()) }))),
             React.createElement("div", null, React.Children.map(children, (child) => child))),
         React.createElement("div", { ref: _tableContent, className: "content", onScroll: handleOnScroll },
             React.createElement("table", { ref: _table },

package/dist/components/form/date-picker/index.js

@@ -45,10 +45,7 @@ const DatePicker = ({ onChange, isClock, ...attributes }) => {
     const [minutes, setMinutes] = useState();
     const [dateTrigger, setDateTrigger] = useState(false);
     const [timeTrigger, setTimeTrigger] = useState(false);
-    let [calendarClassName, setCalendarClassName] = useState([
-        "calendar-wrapper",
-        "closed",
-    ]);
+    let [calendarClassName, setCalendarClassName] = useState(["calendar-wrapper", "closed"]);
     // states => Selected Date
     const [currentYear, setCurrentYear] = useState(_currentDate.getFullYear());
     const [currentMonth, setCurrentMonth] = useState(_currentDate.getMonth());
@@ -195,9 +192,7 @@ const DatePicker = ({ onChange, isClock, ...attributes }) => {
     }, [dateTrigger, calendarOpen]);
     useEffect(() => {
         const generateList = (count, current, setFunc) => {
-            const items = Array.from({ length: count }, (_, i) => (React.createElement("li", { ref: (element) => count === 24
-                    ? (_hoursLiElements.current[i] = element)
-                    : (_minutesLiElements.current[i] = element), key: i, ...(current === i ? { className: "selection-time" } : {}), onClick: () => {
+            const items = Array.from({ length: count }, (_, i) => (React.createElement("li", { ref: (element) => count === 24 ? (_hoursLiElements.current[i] = element) : (_minutesLiElements.current[i] = element), key: i, ...(current === i ? { className: "selection-time" } : {}), onClick: () => {
                     if (count === 24) {
                         setTimeTrigger((prev) => !prev);
                         _hours.current = i;
@@ -277,12 +272,12 @@ const DatePicker = ({ onChange, isClock, ...attributes }) => {
                                 setDateTrigger((prev) => !prev);
                             } }, "‹")),
                     React.createElement("div", { className: "selects" },
-                        React.createElement(Select, { defaultValueIndex: months.findIndex((month) => month.value == _month.current), variant: "borderless", options: months, onChange: (option) => {
+                        React.createElement(Select, { variant: "borderless", value: { value: _month.current, text: String(_month.current) }, options: months, onChange: (option) => {
                                 _month.current = option?.value;
                                 updateDateInput(_year.current, _month.current, _day.current);
                                 setDateTrigger((prev) => !prev);
                             }, placeholder: "Ay" }),
-                        React.createElement(Select, { variant: "borderless", defaultValueIndex: years.findIndex((year) => year.value == _year.current), options: years, onChange: (option) => {
+                        React.createElement(Select, { variant: "borderless", value: { value: _year.current, text: String(_year.current) }, options: years, onChange: (option) => {
                                 _year.current = option?.value;
                                 updateDateInput(_year.current, _month.current, _day.current);
                                 setDateTrigger((prev) => !prev);

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

@@ -1,17 +1,13 @@
 import React from "react";
 import IButtonProps from "../button/IProps";
 import { Variants } from "../../../libs/types";
-import { IGlobalProps } from "../../../libs/types/IGlobalProps";
-interface IProps extends Omit<IGlobalProps, "children" | "disabled">, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "size"> {
+import { IGlobalProps, IValidation } from "../../../libs/types/IGlobalProps";
+interface IProps extends Omit<IGlobalProps, "children" | "disabled">, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "size">, IValidation {
     button?: IButtonProps;
     addon?: {
         variant?: Variants;
         before?: string | number;
         after?: string | number;
     };
-    validation?: {
-        text: string | string[] | React.JSX.Element[] | null;
-        scrollTo?: boolean;
-    };
 }
 export default IProps;

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

@@ -9,7 +9,7 @@ const Input = forwardRef(({ variant = "outlined", status = "light", size = "norm
     const _addonBeforeClassName = ["addon-before"];
     const _addonAfterClassName = ["addon-after"];
     const _inputClassName = [];
-    _inputClassName.push(...Utils.GetClassName(variant, validation?.text ? "danger" : status, border, size, icon, attributes.className));
+    _inputClassName.push(...Utils.GetClassName(variant, !Utils.IsNullOrEmpty(validation?.text) ? "danger" : status, border, size, icon, attributes.className));
     // addon className
     if (addon) {
         _wrapperClassName.push("addon");

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

@@ -1,5 +1,5 @@
 import { Variants, Option, Status } from "../../../libs/types";
-import { IGlobalProps } from "../../../libs/types/IGlobalProps";
+import { IGlobalProps, IValidation } from "../../../libs/types/IGlobalProps";
 interface IMultiple {
     status?: {
         color?: Status;
@@ -8,14 +8,12 @@ interface IMultiple {
             color?: Status;
         };
     };
-    defaultValueIndex?: number[];
     value: Option[];
     onChange: (option: Option[]) => void;
     multiple: true;
 }
 interface ISingle {
     status?: Status;
-    defaultValueIndex?: number;
     value: Option | undefined;
     onChange: (option: Option | undefined) => void;
     multiple?: false;
@@ -24,5 +22,6 @@ export type Props = {
     options: Option[];
     onCreate?: (option: Option) => void;
     placeholder?: string;
-} & (IMultiple | ISingle) & Omit<IGlobalProps, "status">;
+    disabled?: boolean;
+} & (IMultiple | ISingle) & Omit<IGlobalProps, "status"> & IValidation;
 export {};

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

@@ -5,9 +5,10 @@ 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 = { radius: "sm" }, options, value, onChange, onCreate, multiple, defaultValueIndex, ...attributes }) => {
+import Utils from "../../../libs/infrastructure/shared/Utils";
+const Select = ({ variant = "outlined", status, border = { radius: "sm" }, options, value, onChange, onCreate, multiple, placeholder, disabled, validation, }) => {
+    const _selectionClassName = ["selections"];
     // refs
-    let _selectionClassName = "selections";
     const _arSelect = useRef(null);
     const _singleInput = useRef(null);
     const _multipleInput = useRef(null);
@@ -23,13 +24,7 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
     const [searchText, setSearchText] = useState("");
     const [singleInputText, setSingleInputText] = useState("");
     const [navigationIndex, setNavigationIndex] = useState(0);
-    // selection className
-    if (variant)
-        _selectionClassName += ` ${variant}`;
-    _selectionClassName += multiple ? ` ${status?.color || "light"}` : status || "light";
-    // border
-    _selectionClassName += ` border-radius-${border.radius}`;
-    _selectionClassName += ` border-style-solid}`;
+    _selectionClassName.push(...Utils.GetClassName(variant, !Utils.IsNullOrEmpty(validation?.text) ? "danger" : "light", border, undefined, undefined, undefined));
     // methods
     const handleClickOutSide = (event) => {
         const target = event.target;
@@ -134,7 +129,7 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
                 // }
                 if (_singleInput.current) {
                     _singleInput.current.value = "";
-                    _singleInput.current.placeholder = value?.text || attributes.placeholder || "";
+                    _singleInput.current.placeholder = value?.text || placeholder || "";
                 }
             }
             // Options açıldıktan 100ms sonra arama kutusuna otomatik olarak focus oluyor.
@@ -166,7 +161,7 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
             else {
                 if (_singleInput.current) {
                     _singleInput.current.value = value?.text ?? "";
-                    _singleInput.current.placeholder = attributes.placeholder ?? "";
+                    _singleInput.current.placeholder = placeholder ?? "";
                 }
             }
             setOptionsClassName((prev) => [...prev, direction, "closed"]);
@@ -205,8 +200,8 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
     }, [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) },
-                React.createElement("div", { className: "items" }, value.length > 0 ? (value.map((_value, index) => (React.createElement(Chip, { key: index, variant: status?.selected?.variant || "filled", status: status?.selected?.color || status?.color, text: _value.text })))) : (React.createElement("span", null, attributes.placeholder))))) : (React.createElement(Input, { ref: _singleInput, variant: variant, status: status || "light", border: { radius: border.radius }, onClick: () => {
+            multiple ? (React.createElement("div", { className: _selectionClassName.map((c) => c).join(" "), onClick: () => setOptionsOpen((x) => !x) },
+                React.createElement("div", { className: "items" }, value.length > 0 ? (value.map((_value, index) => (React.createElement(Chip, { key: index, variant: status?.selected?.variant || "filled", status: status?.selected?.color || status?.color, text: _value.text })))) : (React.createElement("span", { className: "placeholder" }, placeholder))))) : (React.createElement(Input, { ref: _singleInput, variant: variant, status: !Utils.IsNullOrEmpty(validation?.text) ? "danger" : status, border: { radius: border.radius }, onClick: () => {
                     setOptionsOpen((prev) => !prev);
                     setSingleInputText("");
                 }, onChange: (event) => {
@@ -216,15 +211,18 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
                     if (event.key === "Enter")
                         return;
                     setSearchText(event.currentTarget.value);
-                }, placeholder: attributes.placeholder, disabled: attributes.disabled })),
-            React.createElement("span", { className: `button-clear ${!attributes.disabled && (multiple ? value.length > 0 : value) ? "opened" : "closed"}`, onClick: (event) => {
+                }, placeholder: placeholder, disabled: disabled })),
+            React.createElement("span", { className: `button-clear ${!disabled && (multiple ? value.length > 0 : value) ? "opened" : "closed"}`, onClick: (event) => {
+                    if (disabled)
+                        return;
                     event.stopPropagation();
                     handleCleanSelection();
                 } }),
             React.createElement("span", { className: `angel-down ${optionsOpen ? "opened" : "closed"}`, onClick: (event) => {
                     event.stopPropagation();
                     setOptionsOpen((x) => !x);
-                } })),
+                } }),
+            validation?.text && React.createElement("span", { className: "validation" }, validation.text)),
         React.createElement("div", { ref: _options, className: optionsClassName.map((c) => c).join(" ") },
             multiple && (React.createElement("div", { className: "search-field" },
                 React.createElement(Input, { ref: _searchField, variant: "outlined", status: "light", placeholder: "Search...", onKeyUp: (event) => {
@@ -237,7 +235,7 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
                     React.createElement("span", null, option.text)));
             }))) : !onCreate ? (React.createElement(Paragraph, { color: "gray-500", align: "center" }, "Herhangi bir kay\u0131t bulunumad\u0131!")) : (React.createElement("span", { style: { padding: "1rem", cursor: "pointer" }, onClick: () => {
                     onCreate({ value: "", text: singleInputText });
-                    // handleItemSelected({ value: "", text: singleInputText });
+                    handleItemSelected({ value: "", text: singleInputText });
                 } }, options.length === 0 && singleInputText.length === 0
                 ? "Herhangi bir kayıt bulunumadı!"
                 : `${singleInputText} Ekle`)))));

package/dist/components/navigation/steps/index.js

@@ -2,7 +2,6 @@
 import React, { useState } from "react";
 import "../../../assets/css/components/navigation/steps/steps.css";
 import Typography from "../../data-display/typography";
-import Divider from "../../data-display/divider";
 const { Title } = Typography;
 const Steps = ({ steps = [], onChange }) => {
     // states
@@ -35,7 +34,6 @@ const Steps = ({ steps = [], onChange }) => {
                             index + 1),
                         React.createElement(Title, { Level: "h3" }, step.title))));
             })),
-        React.createElement(Divider, null),
         React.createElement("div", { className: "content" }, steps.map((step, index) => currentStep === index && step.content))));
 };
 export default Steps;

package/dist/libs/core/application/hooks/index.d.ts

@@ -39,18 +39,8 @@ export declare const useNotification: () => {
         status: Status;
     }) => void;
 };
-type Error = {
-    [key: string]: string;
-    type: string;
-}[];
 export declare const useValidation: <TData extends object>(data: TData, params: ValidationProperties<TData>[]) => {
-    submit: boolean;
+    onSubmit: (callback: (result: boolean) => void) => void;
     setSubmit: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-    success: boolean;
-    setSuccess: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-    message: string | null;
-    setMessage: import("react").Dispatch<import("react").SetStateAction<string | null>>;
-    errors: Error;
-    showErrors: (errors: Error, field: string) => string[] | null;
+    errors: Partial<{ [key in keyof TData]: string; }>;
 };
-export {};

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

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import { ConfigContext } from "../contexts/Config";
 import { NotificationContext } from "../contexts/Notification";
 import Utils from "../../../infrastructure/shared/Utils";
@@ -22,66 +22,66 @@ export const useNotification = () => {
     return { notification };
 };
 export const useValidation = function (data, params) {
-    // useStates
+    // refs
+    const _errors = useRef({});
+    // states
+    const [errors, setErrors] = useState({});
     const [submit, setSubmit] = useState(false);
-    const [success, setSuccess] = useState(true);
-    const [message, setMessage] = useState(null);
-    const [errors, setErrors] = useState([]);
     // methods
-    const showErrors = (errors, field) => {
-        const _errors = errors.filter((error) => error[field]);
-        if (_errors.length === 0)
-            return null;
-        return _errors.map((error) => error[field]);
+    const onSubmit = (callback) => {
+        setSubmit(true);
+        setTimeout(() => {
+            let result = true;
+            if (!data || Object.keys(data).length === 0 || params.length === 0)
+                result = false;
+            if (Object.keys(_errors.current).length > 0)
+                result = false;
+            callback(result);
+        }, 0);
+    };
+    const setError = (key, message) => {
+        setErrors((prev) => ({ ...prev, [key]: message }));
+        _errors.current = { ..._errors.current, [key]: message };
     };
     // useEffects
     useEffect(() => {
-        if (!data || Object.keys(data).length === 0 || params.length === 0)
+        if (!submit)
             return;
-        setErrors([]);
+        setErrors({});
+        _errors.current = {};
         params.forEach((param) => {
             const value = data[param.key];
             param.shape?.forEach((s) => {
-                if (s.type === "required") {
-                    !value ? setErrors((errors) => [...errors, { [param.key]: s.message, type: s.type }]) : null;
-                }
-                if (s.type === "minimum") {
-                    value && value.length < s.value
-                        ? setErrors((errors) => [
-                            ...errors,
-                            {
-                                [param.key]: Utils.StringFormat(s.message, s.value, 4),
-                                type: s.type,
-                            },
-                        ])
-                        : null;
-                }
-                if (s.type === "maximum") {
-                    value && value.length > s.value
-                        ? setErrors((errors) => [
-                            ...errors,
-                            {
-                                [param.key]: Utils.StringFormat(s.message, s.value),
-                                type: s.type,
-                            },
-                        ])
-                        : null;
+                if (param.where) {
+                    if (s.type === "required" && param.where(data)) {
+                        Utils.IsNullOrEmpty(value) ? setError(param.key, s.message) : null;
+                    }
                 }
-                if (s.type === "email") {
-                    const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value);
-                    !regex && value ? setErrors((errors) => [...errors, { [param.key]: s.message, type: s.type }]) : null;
+                else {
+                    if (s.type === "required") {
+                        Utils.IsNullOrEmpty(value) ? setError(param.key, s.message) : null;
+                    }
+                    if (s.type === "minimum") {
+                        value && value.length < s.value
+                            ? setError(param.key, Utils.StringFormat(s.message, s.value))
+                            : null;
+                    }
+                    if (s.type === "maximum") {
+                        value && value.length > s.value
+                            ? setError(param.key, Utils.StringFormat(s.message, s.value))
+                            : null;
+                    }
+                    if (s.type === "email") {
+                        const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value);
+                        !regex && Utils.IsNullOrEmpty(value) ? setError(param.key, s.message) : null;
+                    }
                 }
             });
         });
-    }, [data]);
+    }, [submit, data]);
     return {
-        submit,
+        onSubmit,
         setSubmit,
-        success,
-        setSuccess,
-        message,
-        setMessage,
         errors,
-        showErrors,
     };
 };

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

@@ -2,6 +2,7 @@ import { Border, Icon, Sizes, Status, Variants } from "../../types";
 declare class Utils {
     GetClassName: (variant?: Variants, status?: Status, border?: Border, size?: Sizes, icon?: Icon, className?: string) => string[];
     StringFormat: (value: string, ...args: any[]) => string;
+    IsNullOrEmpty: (value: unknown) => boolean;
 }
 declare const _default: Utils;
 export default _default;

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

@@ -19,5 +19,16 @@ class Utils {
             return typeof args[index] !== "undefined" ? args[index] : match;
         });
     };
+    IsNullOrEmpty = (value) => {
+        if (value === null || value === undefined)
+            return true;
+        if (typeof value === "string" && value.trim() === "")
+            return true;
+        if (typeof value === "object" && value !== null && Object.keys(value).length === 0)
+            return true;
+        if (Array.isArray(value) && value.length === 0)
+            return true;
+        return false;
+    };
 }
 export default new Utils();

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

@@ -130,3 +130,9 @@ export interface ISizes {
      */
     size?: Sizes;
 }
+export interface IValidation {
+    validation?: {
+        text: string | undefined;
+        scrollTo?: boolean;
+    };
+}

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

@@ -46,4 +46,5 @@ export type ValidationProperties<T> = {
         value?: string | number;
         message: string;
     }[];
+    where?: (param: T) => boolean;
 };

package/package.json

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