@harjs/react-ui 1.1.5 → 1.1.7

package/dist/components/form/radio-group/Props.d.ts

@@ -0,0 +1,8 @@
+import { ComponentProps, ReactElement } from "react";
+import Checkbox from "../checkbox";
+import { IValidationProps } from "../../../libs/infrastructure/types/IGlobalProps";
+type Props = {
+    children: ReactElement<typeof Checkbox> | ReactElement<typeof Checkbox>[];
+    orientation?: "horizontal" | "vertical";
+} & Omit<ComponentProps<typeof Checkbox>, "children"> & IValidationProps;
+export default Props;

package/dist/components/form/radio-group/Props.js

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

package/dist/components/form/radio-group/index.d.ts

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

package/dist/components/form/radio-group/index.js

@@ -0,0 +1,52 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import Alert from "../../feedback/alert";
+import Radio from "../radio";
+import Title from "../../data-display/typography/title/Title";
+import Flex from "../../data-display/grid-system/flex/Flex";
+const RadioGroup = ({ children, title, orientation, validation, ...groupProps }) => {
+    // states
+    const [error, setError] = useState(null);
+    // methods
+    const renderChildren = () => {
+        if (error)
+            return React.createElement(Alert, { status: "danger", message: error });
+        return React.Children.map(children, (child) => {
+            if (React.isValidElement(child)) {
+                const childProps = child.props;
+                return React.cloneElement(child, {
+                    ...groupProps,
+                    ...child.props,
+                    name: groupProps.name,
+                    color: validation?.text ? "red" : childProps.color || groupProps.color,
+                });
+            }
+            return child;
+        });
+    };
+    // useEffects
+    useEffect(() => {
+        try {
+            React.Children.forEach(children, (child) => {
+                if (!React.isValidElement(child) || child.type !== Radio) {
+                    throw new Error("It can only have Radio elements as children.");
+                }
+            });
+            // Hata yoksa, error'u temizle.
+            setError(null);
+        }
+        catch (err) {
+            if (err instanceof Error) {
+                // Hata varsa error state'e yaz.
+                setError(err.message);
+                console.error(err.message);
+            }
+        }
+    }, [children]);
+    return (React.createElement(Flex, { flexDirection: "column", gap: "var(--space-16)" },
+        title && React.createElement(Title, { Level: "h4" }, title),
+        React.createElement(Flex, { flexDirection: orientation == "horizontal" ? "row" : "column", gap: "var(--space-6)" }, renderChildren()),
+        validation?.text && React.createElement("div", { className: "har-validation-text" }, validation.text)));
+};
+RadioGroup.displayName = "RadioGroup";
+export default RadioGroup;

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

@@ -1,5 +1,6 @@
+import { ComponentProps } from "react";
 import { Variants, Option, Status, Color } from "../../../libs/infrastructure/types";
-import { IBorderProps, IDisabledProps, IIconProps, ISizeProps, IColorProps, IUpperCaseProps, IValidationProps, IVariantProps } from "../../../libs/infrastructure/types/IGlobalProps";
+import Input from "../input";
 export interface IMultiple {
     status?: {
         color?: Color;
@@ -19,12 +20,10 @@ export interface ISingle {
     multiple?: false;
 }
 export type Props = {
-    style?: React.CSSProperties | undefined;
     options: Option[];
     onSearch?: (searchText: string) => void;
     onClick?: () => void;
     onCreate?: (option: Option) => void;
-    placeholder?: string;
     readOnly?: boolean;
     config?: {
         clear?: boolean;
@@ -32,4 +31,4 @@ export type Props = {
             text: "visible" | "hidden";
         };
     };
-} & (IMultiple | ISingle) & IVariantProps & IColorProps & IBorderProps & IIconProps & ISizeProps & IUpperCaseProps & IValidationProps & IDisabledProps;
+} & (IMultiple | ISingle) & Omit<ComponentProps<typeof Input>, "value" | "onChange">;

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" }, style, options, value, onChange, onSearch, onClick, onCreate, multiple, placeholder, validation, upperCase, disabled, readOnly, config = { clear: true, validation: { text: "visible" } }, }) => {
+const Select = ({ variant = "outlined", status, color = "gray", border = { radius: "4" }, style, options, value, onChange, onSearch, onClick, onCreate, multiple, placeholder, validation, upperCase, disabled, readOnly, config = { clear: true, validation: { text: "visible" } }, }) => {
     const _selectionClassName = ["selections"];
     // refs
     const _arSelect = useRef(null);
@@ -28,7 +28,7 @@ const Select = ({ variant = "outlined", status, color, border = { radius: "sm" }
     // options referans kararlılığı için JSON key
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const optionsKey = useMemo(() => JSON.stringify(options), [options]);
-    _selectionClassName.push(...Utils.GetClassName(variant, undefined, validation?.text ? "red" : "light", border, undefined, undefined, undefined));
+    _selectionClassName.push(...Utils.GetClassName(variant, undefined, validation?.text ? "red" : "gray", border, undefined, undefined, undefined));
     // methods
     const handleClickOutSide = (event) => {
         const target = event.target;
@@ -285,7 +285,7 @@ const Select = ({ variant = "outlined", status, color, border = { radius: "sm" }
                         event.stopPropagation();
                         setOptionsOpen((prev) => !prev);
                     } })),
-            multiple && validation && config.validation?.text === "visible" && (React.createElement("span", { className: "validation" }, validation.text))),
+            multiple && validation && config.validation?.text === "visible" && (React.createElement("span", { className: "har-validation-text" }, validation.text))),
         !disabled &&
             optionsOpen &&
             ReactDOM.createPortal(React.createElement("div", { ref: _options, className: "ar-select-options" },
@@ -303,7 +303,7 @@ const Select = ({ variant = "outlined", status, color, border = { radius: "sm" }
                                 event.stopPropagation();
                                 handleItemSelected(option);
                             } },
-                            multiple && React.createElement(Checkbox, { checked: isItem, color: isItem ? "blue" : "light", disabled: true }),
+                            multiple && React.createElement(Checkbox, { checked: isItem, color: isItem ? "blue" : "gray", disabled: true }),
                             React.createElement("span", null, option.text)));
                     }))) : !onCreate ? (React.createElement("div", { className: "no-options-field" },
                     React.createElement("span", { className: "text" }, "Herhangi bir kay\u0131t bulunumad\u0131."))) : (createField())), document.body)));

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

@@ -2,7 +2,7 @@
 import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 import "../../../assets/css/components/form/switch/styles.css";
 import Utils from "../../../libs/infrastructure/shared/Utils";
-const Switch = forwardRef(({ label, color, border = { radius: "pill" }, ...attributes }, ref) => {
+const Switch = forwardRef(({ label, color, border = { radius: "full" }, ...attributes }, ref) => {
     // refs
     let _switchInput = useRef(null);
     let _switch = useRef(null);
@@ -11,7 +11,7 @@ const Switch = forwardRef(({ label, color, border = { radius: "pill" }, ...attri
     // states
     const [checked, setChecked] = useState(attributes.checked ?? false);
     _inputClassName.push(attributes.checked ? "checked" : "unchecked");
-    _switchClassName.push(...Utils.GetClassName(undefined, undefined, attributes.checked ? color : "light", border, undefined, undefined, attributes.className));
+    _switchClassName.push(...Utils.GetClassName(undefined, undefined, attributes.checked ? color : "gray", border, undefined, undefined, attributes.className));
     // hooks
     // Dışarıdan gelen ref'i _innerRef'e bağla.
     useImperativeHandle(ref, () => _switchInput.current);

package/dist/components/form/text-editor/index.js

@@ -6,7 +6,7 @@ import React, { useEffect, useRef, useState } from "react";
 import Utils from "../../../libs/infrastructure/shared/Utils";
 import ReactDOM from "react-dom";
 import Tooltip from "../../feedback/tooltip";
-const TextEditor = ({ color = "light", name, value, onChange, dynamicList, placeholder, height, 
+const TextEditor = ({ color = "gray", name, value, onChange, dynamicList, placeholder, height, 
 // multilang,
 validation, disabled, }) => {
     // refs
@@ -38,7 +38,7 @@ validation, disabled, }) => {
         { command: "justifyRight", icon: "TextAlingRight", tooltip: "Align Right" },
     ];
     const _iframeClassName = [];
-    _iframeClassName.push(...Utils.GetClassName("outlined", undefined, !Utils.IsNullOrEmpty(validation?.text) ? "red" : color, { radius: "sm" }, undefined, undefined, undefined));
+    _iframeClassName.push(...Utils.GetClassName("outlined", undefined, !Utils.IsNullOrEmpty(validation?.text) ? "red" : color, { radius: "4" }, undefined, undefined, undefined));
     // methods
     const execCommand = (command) => {
         if (!_arIframe.current)
@@ -232,9 +232,9 @@ validation, disabled, }) => {
                 }
                 : {}) }),
         React.createElement("div", { className: "toolbar" }, toolbarButtons.map(({ command, icon, tooltip }, index) => (React.createElement(Tooltip, { key: `${command}-${index}`, text: tooltip },
-            React.createElement(Button, { key: command, type: "button", variant: "borderless", color: "light", border: { radius: "none" }, icon: { element: React.createElement(ARIcon, { icon: icon }) }, onClick: () => execCommand(command) }))))),
+            React.createElement(Button, { key: command, type: "button", variant: "borderless", color: "gray", border: { radius: "0" }, icon: { element: React.createElement(ARIcon, { icon: icon }) }, onClick: () => execCommand(command) }))))),
         React.createElement("div", { className: "resize", onMouseDown: handleMouseDown }),
-        validation?.text && React.createElement("span", { className: "validation" }, validation.text),
+        validation?.text && React.createElement("span", { className: "har-validation-text" }, validation.text),
         dynamicList &&
             atRect &&
             ReactDOM.createPortal(React.createElement("div", { ref: _arAliasPanel, className: "ar-alias-panel", style: {

package/dist/components/form/upload/Dropzone.d.ts

@@ -6,5 +6,5 @@ interface IProps {
     handleFileToBase64: (file: File) => Promise<string>;
     handleFileRemove: (fileToRemove: File) => void;
 }
-declare const _default: React.MemoExoticComponent<({ selectedFiles, validationErrors, handleFileToBase64, handleFileRemove }: IProps) => React.JSX.Element | null>;
+declare const _default: React.MemoExoticComponent<({ selectedFiles, validationErrors, handleFileToBase64, handleFileRemove, }: IProps) => React.JSX.Element | null>;
 export default _default;

package/dist/components/form/upload/Dropzone.js

@@ -3,7 +3,7 @@ import React, { memo, useEffect, useState } from "react";
 import { ARIcon } from "../../icons";
 import Utils from "../../../libs/infrastructure/shared/Utils";
 import Buttons from "./Buttons";
-const Dropzone = ({ selectedFiles, validationErrors = [], handleFileToBase64, handleFileRemove }) => {
+const Dropzone = ({ selectedFiles, validationErrors = [], handleFileToBase64, handleFileRemove, }) => {
     const [selectedFile, setSelectedFile] = useState(undefined);
     const [selectedFileBase64, setSelectedFileBase64] = useState(undefined);
     const [fileBase64Map, setFileBase64Map] = useState({});
@@ -21,10 +21,10 @@ const Dropzone = ({ selectedFiles, validationErrors = [], handleFileToBase64, ha
                 handleSelectFile(file);
             } },
             message && (React.createElement("div", { className: "error" },
-                React.createElement(ARIcon, { icon: "ExclamationDiamond-Fill", fill: "var(--white)" }),
+                React.createElement(ARIcon, { icon: "ExclamationDiamond-Fill", fill: "var(--white-100)" }),
                 React.createElement("span", null, message))),
             React.createElement(Buttons, { selectedFile: file, handleFileToBase64: handleFileToBase64, handleFileRemove: handleFileRemove }),
-            file.type.includes("image") ? (React.createElement("img", { src: base64 })) : (React.createElement(ARIcon, { icon: fileInfo.icon ?? "Document", fill: "var(--white)", size: 32 }))));
+            file.type.includes("image") ? (React.createElement("img", { src: base64 })) : (React.createElement(ARIcon, { icon: fileInfo.icon ?? "Document", fill: "var(--white-100)", size: 32 }))));
     };
     // useEffects
     useEffect(() => {
@@ -49,7 +49,8 @@ const Dropzone = ({ selectedFiles, validationErrors = [], handleFileToBase64, ha
                     React.createElement("span", { className: "file-size" },
                         (selectedFile.size / 1024).toFixed(3),
                         React.createElement("span", { className: "size-type" }, "KB")),
-                    React.createElement("span", { className: "file-type" }, Utils.GetFileTypeInformation(selectedFile.type).readableType)))),
-        selectedFiles.length > 1 && React.createElement("div", { className: "items" }, selectedFiles.map((file) => renderFileCard(file))))) : null;
+                    React.createElement("span", { className: "file-type" }, Utils.GetFileTypeInformation(selectedFile.type)
+                        .readableType)))),
+        selectedFiles.length > 1 && (React.createElement("div", { className: "items" }, selectedFiles.map((file) => renderFileCard(file)))))) : null;
 };
 export default memo(Dropzone);

package/dist/components/form/upload/List.js

@@ -7,7 +7,7 @@ const List = ({ type, direction = "row", selectedFiles, validationErrors = [], h
         const message = validationErrors.find((v) => v.fileName === selectedFile.name)?.message;
         return (React.createElement("li", { key: selectedFile.name },
             message && (React.createElement("div", { className: "error" },
-                React.createElement(ARIcon, { icon: "ExclamationDiamond-Fill", fill: "var(--white)" }),
+                React.createElement(ARIcon, { icon: "ExclamationDiamond-Fill", fill: "var(--white-100)" }),
                 React.createElement("span", null, message))),
             React.createElement(Buttons, { selectedFile: selectedFile, handleFileToBase64: handleFileToBase64, handleFileRemove: handleFileRemove }),
             React.createElement("span", { className: "file-name" }, selectedFile.name),
@@ -15,7 +15,8 @@ const List = ({ type, direction = "row", selectedFiles, validationErrors = [], h
                 React.createElement("span", { className: "file-size" },
                     (selectedFile.size / 1024).toFixed(3),
                     React.createElement("span", { className: "size-type" }, "KB")),
-                React.createElement("span", { className: "file-type" }, Utils.GetFileTypeInformation(selectedFile.type).readableType))));
+                React.createElement("span", { className: "file-type" }, Utils.GetFileTypeInformation(selectedFile.type)
+                    .readableType))));
     })));
 };
 export default memo(List);

package/dist/components/layout/LSider.js

@@ -47,7 +47,7 @@ const LSider = ({ logo, footer, ...attributes }) => {
             } }, isLockedSessionStorage ? logo?.default : logo?.mini),
         React.createElement("div", null, sider.element),
         footer && (React.createElement("footer", null,
-            React.createElement(Paragraph, { size: "small" }, footer)))));
+            React.createElement(Paragraph, { size: "sm" }, footer)))));
 };
 LSider.displayName = "Layout.LSider";
 export default LSider;

package/dist/components/navigation/wizard/IProps.d.ts

@@ -0,0 +1,34 @@
+import { ComponentProps, Dispatch, SetStateAction } from "react";
+import { StepProps, ValidationProps } from "../../../libs/infrastructure/types";
+import { ISizeProps } from "../../../libs/infrastructure/types/IGlobalProps";
+import Wizard from ".";
+export interface IProps<TData extends object> extends ISizeProps {
+    data: {
+        get: Partial<TData>;
+        set: Dispatch<SetStateAction<Partial<TData>>>;
+    };
+    name: string;
+    title?: string;
+    description?: string;
+    steps: StepProps[];
+    currentStep?: number;
+    onChange: (currentStep: number) => void;
+    onCompleted?: () => void;
+    validation?: {
+        data: TData;
+        rules: ValidationProps<TData>[];
+    };
+    config?: {
+        locale?: Intl.LocalesArgument;
+    };
+}
+export interface IWizardDrawerProps extends Omit<ComponentProps<typeof Wizard>, "config"> {
+    open: {
+        get: boolean;
+        set: React.Dispatch<React.SetStateAction<boolean>>;
+    };
+    config?: {
+        locale?: Intl.LocalesArgument;
+        freeContent?: boolean;
+    };
+}

package/dist/components/navigation/wizard/IProps.js

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

package/dist/components/navigation/wizard/index.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import "../../../assets/css/components/navigation/wizard/styles.css";
+import { IProps, IWizardDrawerProps } from "./IProps";
+declare const Wizard: {
+    <TData extends object>({ data, name, title, description, steps, currentStep, onChange, onCompleted, validation, config, }: IProps<TData>): React.JSX.Element;
+    Drawer({ open, ...props }: IWizardDrawerProps): React.JSX.Element;
+};
+export default Wizard;

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

@@ -0,0 +1,138 @@
+"use client";
+import React, { useEffect, useMemo, useState } from "react";
+import Typography from "../../data-display/typography";
+import "../../../assets/css/components/navigation/wizard/styles.css";
+import Button from "../../form/button";
+import { useValidation } from "../../../libs/core/application/hooks";
+import Flex from "../../data-display/grid-system/flex/Flex";
+import Drawer from "../../feedback/drawer";
+import useTranslation from "@harjs/translation/dist/libs/core/application/hooks/useTranslation";
+import WizardTR from "../../../libs/core/application/locales/wizard/tr";
+import WizardEN from "../../../libs/core/application/locales/wizard/en";
+const { Title, Paragraph } = Typography;
+const Wizard = function ({ data, name, title, description, steps, currentStep, onChange, onCompleted, validation, config, }) {
+    // states
+    const getStorageKey = useMemo(() => `${window.location.pathname}::${name}`, [name]);
+    // states
+    const [_currentStep, setCurrentStep] = useState(() => {
+        if (typeof currentStep === "number")
+            return currentStep;
+        if (typeof window !== "undefined") {
+            const saved = window.sessionStorage.getItem(getStorageKey);
+            const parsed = saved !== null ? parseInt(saved, 10) : NaN;
+            if (!Number.isNaN(parsed) && parsed >= 0 && parsed < steps.length) {
+                return parsed;
+            }
+        }
+        return 0;
+    });
+    // hooks
+    const { t } = useTranslation(String(config?.locale ?? "tr"), {
+        tr: { ...WizardTR },
+        en: { ...WizardEN },
+    });
+    const { errors, onSubmit, setSubmit } = useValidation(validation?.data, validation?.rules, _currentStep + 1);
+    // methods
+    const persistStep = (step) => {
+        if (typeof window === "undefined")
+            return;
+        window.sessionStorage.setItem(getStorageKey, String(step));
+    };
+    const goToStep = (step) => {
+        setCurrentStep(step);
+        onChange(step);
+        persistStep(step);
+    };
+    const getStepIconStatus = (currentStep, index) => {
+        if (currentStep > index) {
+            return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", fill: "var(--green-500)", viewBox: "0 0 256 256" },
+                React.createElement("path", { d: "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z" })));
+        }
+        if (currentStep === index) {
+            return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", fill: "var(--blue-500)", viewBox: "0 0 256 256" },
+                React.createElement("path", { d: "M136,32V64a8,8,0,0,1-16,0V32a8,8,0,0,1,16,0Zm37.25,58.75a8,8,0,0,0,5.66-2.35l22.63-22.62a8,8,0,0,0-11.32-11.32L167.6,77.09a8,8,0,0,0,5.65,13.66ZM224,120H192a8,8,0,0,0,0,16h32a8,8,0,0,0,0-16Zm-45.09,47.6a8,8,0,0,0-11.31,11.31l22.62,22.63a8,8,0,0,0,11.32-11.32ZM128,184a8,8,0,0,0-8,8v32a8,8,0,0,0,16,0V192A8,8,0,0,0,128,184ZM77.09,167.6,54.46,190.22a8,8,0,0,0,11.32,11.32L88.4,178.91A8,8,0,0,0,77.09,167.6ZM72,128a8,8,0,0,0-8-8H32a8,8,0,0,0,0,16H64A8,8,0,0,0,72,128ZM65.78,54.46A8,8,0,0,0,54.46,65.78L77.09,88.4A8,8,0,0,0,88.4,77.09Z" })));
+        }
+        return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", fill: "var(--gray-300)", viewBox: "0 0 256 256" },
+            React.createElement("path", { d: "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Z" })));
+    };
+    const currentStepData = steps[_currentStep];
+    // useEffects
+    useEffect(() => {
+        if (typeof currentStep === "number" && currentStep !== _currentStep) {
+            setCurrentStep(currentStep);
+        }
+    }, [currentStep]);
+    return (React.createElement("div", { className: "har-wizard" },
+        React.createElement("div", { className: "side-bar" },
+            React.createElement(Flex, { flexDirection: "column", gap: "var(--space-16)" },
+                React.createElement(Title, { Level: "h3", style: { fontWeight: 600 } }, title),
+                React.createElement(Paragraph, { size: "sm" }, description),
+                React.createElement("div", { className: "divider" }),
+                React.createElement("div", { className: "steps" }, steps.length > 0 &&
+                    steps.map((step, index) => {
+                        return (React.createElement("div", { key: step.key, className: `step-item ${_currentStep === index ? "current" : "no-current"}` },
+                            React.createElement("span", null, getStepIconStatus(_currentStep, index)),
+                            React.createElement(Title, { Level: "h5", style: { fontWeight: 500 } }, step.title),
+                            React.createElement("span", null, _currentStep === index ? (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "var(--gray-300)", viewBox: "0 0 256 256" },
+                                React.createElement("path", { d: "M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z" }))) : null)));
+                    })))),
+        React.createElement("div", { className: "panel" },
+            React.createElement("div", { className: "header" },
+                React.createElement(Title, { Level: "h3" }, t("Wizard.Title")),
+                React.createElement("div", { className: "header-right" },
+                    React.createElement("div", { className: "progress" },
+                        React.createElement("div", { className: "track" },
+                            React.createElement("div", { className: "fill", style: {
+                                    width: `${steps.length > 0 ? ((_currentStep + 1) / steps.length) * 100 : 0}%`,
+                                } })),
+                        React.createElement("span", null,
+                            _currentStep + 1,
+                            "/",
+                            steps.length,
+                            " ",
+                            t("Wizard.Title.Complete"))))),
+            React.createElement("div", { className: "content" }, currentStepData &&
+                React.Children.map(currentStepData.content, (child) => {
+                    if (!React.isValidElement(child))
+                        return null;
+                    return React.cloneElement(child, {
+                        ...(data ? { data: data } : {}),
+                        ...(validation ? { errors: errors } : {}),
+                    });
+                })),
+            React.createElement("div", { className: "footer" },
+                React.createElement(Flex, { flexDirection: "row", gap: "var(--space-12)" },
+                    _currentStep > 0 && (React.createElement(Button, { type: "button", variant: "outlined", color: "gray", onClick: () => goToStep(_currentStep - 1) }, t("Wizard.Button.Back"))),
+                    _currentStep < steps.length - 1 && (React.createElement(Button, { type: "button", color: "blue", onClick: () => {
+                            if (validation) {
+                                onSubmit((result) => {
+                                    if (!result)
+                                        return;
+                                    setSubmit(false);
+                                    goToStep(_currentStep + 1);
+                                });
+                            }
+                            else {
+                                goToStep(_currentStep + 1);
+                            }
+                        } }, t("Wizard.Button.NextStep"))),
+                    _currentStep === steps.length - 1 && (React.createElement(Button, { type: "button", color: "blue", onClick: () => {
+                            if (validation) {
+                                onSubmit((result) => {
+                                    if (!result)
+                                        return;
+                                    setSubmit(false);
+                                    persistStep(_currentStep);
+                                    onCompleted?.();
+                                    window.sessionStorage.removeItem(getStorageKey);
+                                });
+                            }
+                            else {
+                                persistStep(_currentStep);
+                                onCompleted?.();
+                                window.sessionStorage.removeItem(getStorageKey);
+                            }
+                        } }, t("Wizard.Button.Complete"))))))));
+};
+export default Wizard;
+Wizard.Drawer = ({ open, ...props }) => (React.createElement(Drawer, { open: open, tabs: [{ title: "", content: React.createElement(Wizard, { ...props }) }], size: props.size, config: props.config }));

package/dist/index.d.ts

@@ -1,11 +1,14 @@
-import "./assets/css/core/ar-core.css";
+import "./assets/css/core/har-core.css";
 import Button from "./components/form/button";
 import ButtonAction from "./components/form/button-action";
 import ButtonGroup from "./components/form/button-group";
 import Checkbox from "./components/form/checkbox";
+import CheckboxCard from "./components/form/checkbox-card";
+import CheckboxGroup from "./components/form/checkbox-group";
 import DatePicker from "./components/form/date-picker";
 import Input from "./components/form/input";
 import Radio from "./components/form/radio";
+import RadioGroup from "./components/form/radio-group";
 import Select from "./components/form/select";
 import Switch from "./components/form/switch";
 import TextEditor from "./components/form/text-editor";
@@ -29,10 +32,11 @@ import Modal from "./components/feedback/modal";
 import Popover from "./components/feedback/popover";
 import Progress from "./components/feedback/progress";
 import Tooltip from "./components/feedback/tooltip";
+import Wizard from "./components/navigation/wizard";
 import Breadcrumb from "./components/navigation/breadcrumb";
 import Menu from "./components/navigation/menu";
 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, Radio, Select, Switch, TextEditor, Upload, Gantt, Calendar, 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, CheckboxCard, CheckboxGroup, DatePicker, Input, Radio, RadioGroup, Select, Switch, TextEditor, Upload, Gantt, Calendar, Card, Chip, Diagram, Divider, DnD, KanbanBoard, Paper, SyntaxHighlighter, Table, Tabs, Typography, Alert, Drawer, Modal, Popover, Progress, Tooltip, Wizard, Breadcrumb, Menu, Pagination, Steps, Grid, Layout, };

package/dist/index.js

@@ -1,12 +1,15 @@
-import "./assets/css/core/ar-core.css";
+import "./assets/css/core/har-core.css";
 // Form Elements
 import Button from "./components/form/button";
 import ButtonAction from "./components/form/button-action";
 import ButtonGroup from "./components/form/button-group";
 import Checkbox from "./components/form/checkbox";
+import CheckboxCard from "./components/form/checkbox-card";
+import CheckboxGroup from "./components/form/checkbox-group";
 import DatePicker from "./components/form/date-picker";
 import Input from "./components/form/input";
 import Radio from "./components/form/radio";
+import RadioGroup from "./components/form/radio-group";
 import Select from "./components/form/select";
 import Switch from "./components/form/switch";
 import TextEditor from "./components/form/text-editor";
@@ -33,6 +36,7 @@ import Modal from "./components/feedback/modal";
 import Popover from "./components/feedback/popover";
 import Progress from "./components/feedback/progress";
 import Tooltip from "./components/feedback/tooltip";
+import Wizard from "./components/navigation/wizard";
 // Navigation
 import Breadcrumb from "./components/navigation/breadcrumb";
 import Menu from "./components/navigation/menu";
@@ -43,13 +47,13 @@ import Grid from "./components/data-display/grid-system";
 import Layout from "./components/layout";
 export { 
 // Form Elements
-Button, ButtonAction, ButtonGroup, Checkbox, DatePicker, Input, Radio, Select, Switch, TextEditor, Upload, 
+Button, ButtonAction, ButtonGroup, Checkbox, CheckboxCard, CheckboxGroup, DatePicker, Input, Radio, RadioGroup, Select, Switch, TextEditor, Upload, 
 // Charts
 Gantt, 
 // Data Display
 Calendar, Card, Chip, Diagram, Divider, DnD, KanbanBoard, Paper, SyntaxHighlighter, Table, Tabs, Typography, 
 // Feedback
-Alert, Drawer, Modal, Popover, Progress, Tooltip, 
+Alert, Drawer, Modal, Popover, Progress, Tooltip, Wizard, 
 // Navigation
 Breadcrumb, Menu, Pagination, Steps, 
 // Layout

package/dist/libs/core/application/locales/date-picker/IDatePickerLocale.d.ts

@@ -0,0 +1,25 @@
+interface IDatePickerLocale {
+    "DatePicker.Mon": string;
+    "DatePicker.Tue": string;
+    "DatePicker.Wed": string;
+    "DatePicker.Thu": string;
+    "DatePicker.Fri": string;
+    "DatePicker.Sat": string;
+    "DatePicker.Sun": string;
+    "DatePicker.January": string;
+    "DatePicker.February": string;
+    "DatePicker.March": string;
+    "DatePicker.April": string;
+    "DatePicker.May": string;
+    "DatePicker.June": string;
+    "DatePicker.July": string;
+    "DatePicker.August": string;
+    "DatePicker.September": string;
+    "DatePicker.October": string;
+    "DatePicker.November": string;
+    "DatePicker.December": string;
+    "DatePicker.Alert.1.Text": string;
+    "DatePicker.Button.Okay": string;
+    "DatePicker.Button.Now": string;
+}
+export default IDatePickerLocale;

package/dist/libs/core/application/locales/date-picker/IDatePickerLocale.js

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

package/dist/libs/core/application/locales/date-picker/en.d.ts

@@ -0,0 +1,3 @@
+import IDatePickerLocale from "./IDatePickerLocale";
+declare const DatePickerEN: IDatePickerLocale;
+export default DatePickerEN;

package/dist/libs/core/application/locales/date-picker/en.js

@@ -0,0 +1,25 @@
+const DatePickerEN = {
+    "DatePicker.Mon": "Mon",
+    "DatePicker.Tue": "Tue",
+    "DatePicker.Wed": "Wed",
+    "DatePicker.Thu": "Thu",
+    "DatePicker.Fri": "Fri",
+    "DatePicker.Sat": "Sat",
+    "DatePicker.Sun": "Sun",
+    "DatePicker.January": "January",
+    "DatePicker.February": "February",
+    "DatePicker.March": "March",
+    "DatePicker.April": "April",
+    "DatePicker.May": "May",
+    "DatePicker.June": "June",
+    "DatePicker.July": "July",
+    "DatePicker.August": "August",
+    "DatePicker.September": "September",
+    "DatePicker.October": "October",
+    "DatePicker.November": "November",
+    "DatePicker.December": "December",
+    "DatePicker.Alert.1.Text": "You need to select either the month or year.",
+    "DatePicker.Button.Okay": "Okay",
+    "DatePicker.Button.Now": "Now",
+};
+export default DatePickerEN;

package/dist/libs/core/application/locales/date-picker/tr.d.ts

@@ -0,0 +1,3 @@
+import IDatePickerLocale from "./IDatePickerLocale";
+declare const DatePickerTR: IDatePickerLocale;
+export default DatePickerTR;

package/dist/libs/core/application/locales/date-picker/tr.js

@@ -0,0 +1,25 @@
+const DatePickerTR = {
+    "DatePicker.Mon": "Pzt",
+    "DatePicker.Tue": "Sal",
+    "DatePicker.Wed": "Çar",
+    "DatePicker.Thu": "Per",
+    "DatePicker.Fri": "Cum",
+    "DatePicker.Sat": "Cmt",
+    "DatePicker.Sun": "Paz",
+    "DatePicker.January": "Ocak",
+    "DatePicker.February": "Şubat",
+    "DatePicker.March": "Mart",
+    "DatePicker.April": "Nisan",
+    "DatePicker.May": "Mayıs",
+    "DatePicker.June": "Haziran",
+    "DatePicker.July": "Temmuz",
+    "DatePicker.August": "Ağustos",
+    "DatePicker.September": "Eylül",
+    "DatePicker.October": "Ekim",
+    "DatePicker.November": "Kasım",
+    "DatePicker.December": "Aralık",
+    "DatePicker.Alert.1.Text": "Ay veya yıl seçimi yapmanız gerekmektedir.",
+    "DatePicker.Button.Okay": "Tamam",
+    "DatePicker.Button.Now": "Şimdi",
+};
+export default DatePickerTR;

package/dist/libs/core/application/locales/wizard/IWizardLocale.d.ts

@@ -0,0 +1,8 @@
+interface IWizardLocale {
+    "Wizard.Title": string;
+    "Wizard.Title.Complete": string;
+    "Wizard.Button.Back": string;
+    "Wizard.Button.NextStep": string;
+    "Wizard.Button.Complete": string;
+}
+export default IWizardLocale;

package/dist/libs/core/application/locales/wizard/IWizardLocale.js

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

package/dist/libs/core/application/locales/wizard/en.d.ts

@@ -0,0 +1,3 @@
+import IWizardLocale from "./IWizardLocale";
+declare const WizardEN: IWizardLocale;
+export default WizardEN;