@harjs/react-ui 1.1.4 → 1.1.6

package/dist/components/feedback/modal/index.js

@@ -4,11 +4,11 @@ import "../../../assets/css/components/feedback/modal/styles.css";
 import Typography from "../../data-display/typography";
 import Popover from "../popover";
 const { Title } = Typography;
-const Modal = ({ children, open, closePopover, title, size = "normal", footer, disableCloseOnBackdrop, disableCloseOnEsc, ...attributes }) => {
+const Modal = ({ children, open, closePopover, title, size = "md", footer, disableCloseOnBackdrop, disableCloseOnEsc, ...attributes }) => {
     // refs
-    const _arModal = useRef(null);
-    const _modalWrapperClassName = ["ar-modal-wrapper"];
-    const _modalClassName = ["ar-modal", size];
+    const _modal = useRef(null);
+    const _modalWrapperClassName = ["har-modal-wrapper"];
+    const _modalClassName = ["har-modal", size];
     if (Object.keys(open).length > 0 && open.get)
         _modalWrapperClassName.push("opened");
     else
@@ -18,39 +18,34 @@ const Modal = ({ children, open, closePopover, title, size = "normal", footer, d
         if (disableCloseOnEsc)
             return;
         const key = event.key;
-        const isArSelectOptions = document.getElementsByClassName("ar-select-options").length === 0;
-        const isArCalendar = document.getElementsByClassName("ar-date-calendar").length === 0;
-        const isArPopover = document.getElementsByClassName("ar-popover").length === 0;
+        const isArSelectOptions = document.getElementsByClassName("har-select-options").length === 0;
+        const isArCalendar = document.getElementsByClassName("har-date-calendar").length === 0;
+        const isArPopover = document.getElementsByClassName("har-popover").length === 0;
         if (key === "Escape" && isArCalendar && isArSelectOptions && isArPopover) {
             event.stopPropagation();
             open.set(false);
         }
     };
     const handlePosition = () => {
-        if (_arModal.current) {
-            const arModal = _arModal.current;
-            const content = arModal.querySelector("div.content");
-            const rect = arModal.getBoundingClientRect();
+        if (_modal.current) {
+            const modalCurrent = _modal.current;
+            const content = modalCurrent.querySelector("div.content");
+            const rect = modalCurrent.getBoundingClientRect();
             const screenCenterX = window.innerWidth / 2;
-            // const screenCenterY = window.innerHeight / 2;
             const sx = window.scrollX || document.documentElement.scrollLeft;
-            // const sy = window.scrollY || document.documentElement.scrollTop;
             if (window.innerHeight > 1024) {
-                // arModal.style.top = `${sy + 100}px`;
-                arModal.style.top = "100px";
+                modalCurrent.style.top = "100px";
                 content.removeAttribute("style");
             }
             else if (window.innerHeight > 575 && window.innerHeight < 1024) {
-                // arModal.style.top = `${screenCenterY - rect.height / 2 + sy}px`;
-                arModal.style.top = "100px";
+                modalCurrent.style.top = "100px";
                 content.removeAttribute("style");
             }
             else if (window.innerHeight < 575) {
-                // arModal.style.top = `${sy + 15}px`;
-                arModal.style.top = "15px";
+                modalCurrent.style.top = "15px";
                 content.style.maxHeight = `calc(100vh - ${footer ? "2.5px" : "-30.5px"} - 3.5rem - 4rem - ${footer ? "2rem" : "0rem"})`;
             }
-            arModal.style.left = `${screenCenterX - rect.width / 2 + sx}px`;
+            modalCurrent.style.left = `${screenCenterX - rect.width / 2 + sx}px`;
         }
     };
     // useEffects
@@ -72,15 +67,15 @@ const Modal = ({ children, open, closePopover, title, size = "normal", footer, d
             _modalClassName.push(attributes.className);
     }, [attributes.className]);
     return (React.createElement("div", { className: _modalWrapperClassName.map((c) => c).join(" ") },
-        React.createElement("div", { className: "ar-modal-bg", onMouseDown: (event) => {
+        React.createElement("div", { className: "har-modal-bg", onMouseDown: (event) => {
                 if (disableCloseOnBackdrop)
                     return;
                 event.stopPropagation();
                 const target = event.target;
-                if (_arModal.current && !_arModal.current.contains(target))
+                if (_modal.current && !_modal.current.contains(target))
                     open.set(false);
             } }),
-        React.createElement("div", { ref: _arModal, ...attributes, className: _modalClassName.map((c) => c).join(" "), role: "dialog" },
+        React.createElement("div", { ref: _modal, ...attributes, className: _modalClassName.map((c) => c).join(" "), role: "dialog" },
             title && (React.createElement("div", { className: "header" },
                 React.createElement(Title, { Level: "h3" }, title),
                 closePopover ? (React.createElement(Popover, { ...closePopover },

package/dist/components/feedback/popover/index.js

@@ -78,11 +78,11 @@ const Popover = ({ children, title, message, content, onConfirm, windowBlur, ful
                 message && React.createElement("p", { className: "message" }, message),
                 content && React.createElement("div", { className: "content" }, content),
                 onConfirm && (React.createElement("div", { className: "footer" },
-                    React.createElement(Button, { color: "green", size: "small", onClick: () => {
+                    React.createElement(Button, { color: "green", size: "sm", onClick: () => {
                             onConfirm(true);
                             setOpen(false);
                         } }, config?.buttons.okay ?? "Evet"),
-                    React.createElement(Button, { size: "small", onClick: () => {
+                    React.createElement(Button, { size: "sm", onClick: () => {
                             onConfirm(false);
                             setOpen(false);
                         } }, config?.buttons.cancel ?? "Hayır")))), document.body),

package/dist/components/feedback/popup-confirm/index.js

@@ -30,7 +30,7 @@ const PopupConfirm = ({ title, message, status, isOpen, buttons, onConfirm }) =>
             case "delete":
                 return "red";
             default:
-                return "light";
+                return "gray";
         }
     };
     const buttonIcons = () => {
@@ -48,7 +48,7 @@ const PopupConfirm = ({ title, message, status, isOpen, buttons, onConfirm }) =>
             case "delete":
                 return React.createElement(ARIcon, { icon: "Trash-Fill", fill: "var(--danger)", size: 24 });
             default:
-                return "light";
+                return "gray";
         }
     };
     // useEffects

package/dist/components/feedback/progress/index.js

@@ -13,7 +13,7 @@ const Progress = ({ value, reverse, isVisibleValue = false }) => {
         _status = !reverse ? "primary" : "warning";
     else if (value >= 76 && value <= 100)
         _status = !reverse ? "success" : "danger";
-    _arProgressClassName.push(...Utils.GetClassName("filled", _status, undefined, { radius: "pill" }, undefined, undefined, undefined));
+    _arProgressClassName.push(...Utils.GetClassName("filled", _status, undefined, { radius: "full" }, undefined, undefined, undefined));
     return (React.createElement("div", { className: "ar-progress" },
         React.createElement("div", { className: `ar-progress-bar ${_arProgressClassName.map((c) => c).join(" ")}` }),
         React.createElement("div", { className: `ar-progress-value ${_arProgressClassName.map((c) => c).join(" ")}`, style: {

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

@@ -2,22 +2,24 @@
 import React, { useRef } from "react";
 import "../../../assets/css/components/form/button/styles.css";
 import Utils from "../../../libs/infrastructure/shared/Utils";
-const Button = ({ children, variant = "filled", shape, color = "light", border = { radius: "sm" }, size = "normal", position, fullWidth, icon, upperCase, ...attributes }) => {
+const Button = ({ children, variant = "filled", shape, color = "gray", border = { radius: "4" }, size = "md", position, fullWidth, icon, upperCase, ...attributes }) => {
     // refs
     const _button = useRef(null);
-    const _arButtonClassName = ["ar-button"];
-    _arButtonClassName.push(...Utils.GetClassName(variant, undefined, color, border, size, icon, attributes.className));
+    const _buttonClassName = ["har-button"];
+    _buttonClassName.push(...Utils.GetClassName(attributes.disabled ? "surface-borderless" : variant, undefined, attributes.disabled ? "gray" : color, border, size, icon, attributes.className));
     if (!children)
-        _arButtonClassName.push("no-content");
+        _buttonClassName.push("no-content");
     if (fullWidth)
-        _arButtonClassName.push("full-width");
+        _buttonClassName.push("full-width");
     if (shape)
-        _arButtonClassName.push(`ar-button-shape ${shape}`);
+        _buttonClassName.push(`shape ${shape}`);
     if (position) {
-        _arButtonClassName.push(position.type);
-        _arButtonClassName.push(position.inset.map((_inset) => _inset).join(" "));
+        _buttonClassName.push(position.type);
+        _buttonClassName.push(position.inset.map((_inset) => _inset).join(" "));
     }
-    return (React.createElement("button", { ref: _button, ...attributes, type: attributes.type ?? "button", className: _arButtonClassName.map((c) => c).join(" "), onClick: (event) => {
+    if (attributes.disabled)
+        _buttonClassName.push("disabled");
+    return (React.createElement("button", { ref: _button, ...attributes, type: attributes.type ?? "button", className: _buttonClassName.map((c) => c).join(" "), onClick: (event) => {
             // Disabled gelmesi durumunda işlem yapmasına izin verme...
             if (attributes.disabled)
                 return;
@@ -35,7 +37,7 @@ const Button = ({ children, variant = "filled", shape, color = "light", border =
         } },
         React.createElement("span", { className: "text" },
             icon?.element,
-            React.createElement("span", null, !shape ? (typeof children === "string" && upperCase ? children.toLocaleUpperCase() : children) : ""))));
+            !shape && React.createElement("span", null, typeof children === "string" && upperCase ? children.toLocaleUpperCase() : children))));
 };
 Button.displayName = "Button";
 export default Button;

package/dist/components/form/button-action/IProps.d.ts

@@ -1,8 +1,12 @@
-import { IColorProps, IIconProps } from "../../../libs/infrastructure/types/IGlobalProps";
-interface IProps {
-    buttons: ({
-        text: string;
-        onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-    } & IColorProps & IIconProps)[];
+import { ComponentProps, ReactElement } from "react";
+import Button from "../button";
+import { Color, Icon, Variants } from "../../../libs/infrastructure/types";
+type ButtonProps = Pick<ComponentProps<typeof Button>, "color" | "size" | "upperCase" | "icon">;
+interface IProps extends ButtonProps {
+    children: ReactElement | ReactElement<typeof Button> | ReactElement<typeof Button>[];
+    title?: string;
+    variant?: Variants;
+    _color?: Color;
+    _icon?: Icon;
 }
 export default IProps;

package/dist/components/form/button-action/index.js

@@ -1,9 +1,9 @@
 "use client";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useLayoutEffect, useRef, useState } from "react";
 import "../../../assets/css/components/form/button-action/styles.css";
 import Button from "../button";
 import ReactDOM from "react-dom";
-const ButtonAction = ({ buttons }) => {
+const ButtonAction = ({ children, title, variant, _color, _icon, ...actionProps }) => {
     // refs
     const _wrapper = useRef(null);
     const _button = useRef(null);
@@ -28,26 +28,45 @@ const ButtonAction = ({ buttons }) => {
             if (elementRect) {
                 const screenCenterX = window.innerWidth / 2;
                 const screenCenterY = window.innerHeight / 2;
-                const sx = window.scrollX || document.documentElement.scrollLeft;
-                const sy = window.scrollY || document.documentElement.scrollTop;
+                const gap = 6;
+                // 1. YÜKSEKLİK (TOP) HESAPLAMA
+                if (elementRect.top > screenCenterY) {
+                    _list.current.style.top = `${elementRect.top - popoverRect.height - gap}px`;
+                }
+                else {
+                    _list.current.style.top = `${elementRect.bottom + gap}px`;
+                }
+                // 2. YATAY HİZALAMA (LEFT) HESAPLAMA (Görsellerdeki sorunu çözen kısım)
+                if (elementRect.left > screenCenterX) {
+                    _list.current.style.left = `${elementRect.right - popoverRect.width}px`;
+                }
+                else {
+                    _list.current.style.left = `${elementRect.left}px`;
+                }
                 _list.current.style.visibility = "visible";
                 _list.current.style.opacity = "1";
-                _list.current.style.top = `${(elementRect.top > screenCenterY
-                    ? elementRect.top - popoverRect.height + elementRect.height
-                    : elementRect.top) + sy}px`;
-                _list.current.style.left = `${(elementRect.left > screenCenterX
-                    ? elementRect.right - (elementRect.width + 7.5) - popoverRect.width
-                    : elementRect.left + elementRect.width + 7.5) + sx}px`;
             }
         }
     };
     const handleResizeEvent = () => setOpen(false);
+    const renderChildren = () => {
+        return React.Children.map(children, (child) => {
+            if (React.isValidElement(child)) {
+                return React.cloneElement(child, {
+                    ...actionProps,
+                    ...child.props,
+                    variant: "borderless",
+                });
+            }
+            return child;
+        });
+    };
     // useEffects
-    useEffect(() => {
+    useLayoutEffect(() => {
         if (!open)
             return;
-        setTimeout(() => handlePosition(), 0);
-        window.addEventListener("blur", () => setOpen(false));
+        handlePosition();
+        // window.addEventListener("blur", () => setOpen(false));
         window.addEventListener("resize", handleResizeEvent);
         document.addEventListener("click", handleClickOutSide);
         document.addEventListener("keydown", handleKeys);
@@ -58,11 +77,11 @@ const ButtonAction = ({ buttons }) => {
             document.removeEventListener("keydown", handleKeys);
         };
     }, [open]);
-    return (React.createElement("div", { ref: _wrapper, className: "ar-button-action" },
-        React.createElement("span", { ref: _button },
-            React.createElement(Button, { variant: "borderless", color: "light", icon: { element: React.createElement("span", { className: "dotted" }) }, onClick: () => setOpen((prev) => !prev) })),
+    return (React.createElement("div", { ref: _wrapper, className: "har-button-action" },
+        React.createElement("div", { ref: _button },
+            React.createElement(Button, { variant: variant, color: _color, icon: _icon ? { ..._icon } : { element: React.createElement("span", { className: "dotted" }) }, ...(!title && { shape: "square" }), onClick: () => setOpen((prev) => !prev) }, title && title)),
         open &&
-            ReactDOM.createPortal(React.createElement("span", { ref: _list, className: "ar-action-buttons" }, buttons.map((button, index) => (React.createElement(Button, { key: index, style: { display: "flex", justifyContent: "flex-start" }, variant: "borderless", color: button.color ?? "blue", size: "small", icon: button.icon, onClick: button.onClick }, button.text)))), document.body)));
+            ReactDOM.createPortal(React.createElement("div", { ref: _list, className: "har-action-buttons" }, renderChildren()), document.body)));
 };
 ButtonAction.displayName = "ButtonAction";
 export default ButtonAction;

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

@@ -0,0 +1,6 @@
+import { ComponentProps, ReactElement } from "react";
+import Button from "../button";
+type Props = {
+    children: ReactElement<typeof Button> | ReactElement<typeof Button>[];
+} & Omit<ComponentProps<typeof Button>, "children">;
+export default Props;

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

@@ -1,7 +1,5 @@
-import React, { ReactElement } from "react";
+import React from "react";
 import "../../../assets/css/components/form/button-group/styles.css";
-import Button from "../button";
-declare const ButtonGroup: React.FC<{
-    children: ReactElement<typeof Button> | ReactElement<typeof Button>[];
-}>;
+import Props from "./Props";
+declare const ButtonGroup: React.FC<Props>;
 export default ButtonGroup;

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

@@ -3,29 +3,43 @@ import React, { useEffect, useState } from "react";
 import "../../../assets/css/components/form/button-group/styles.css";
 import Button from "../button";
 import Alert from "../../feedback/alert";
-const ButtonGroup = ({ children }) => {
+const ButtonGroup = ({ children, ...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)) {
+                return React.cloneElement(child, {
+                    ...groupProps,
+                    ...child.props,
+                });
+            }
+            return child;
+        });
+    };
+    // useEffects
     useEffect(() => {
         try {
-            // Çocuk elemanların sadece `Button` bileşenleri olduğundan emin olun
             React.Children.forEach(children, (child) => {
                 if (!React.isValidElement(child) || child.type !== Button) {
-                    throw new Error("ButtonGroup can only have Button elements as children.");
+                    throw new Error("It can only have Button elements as children.");
                 }
             });
-            // Hata yoksa, error'u temizle
+            // Hata yoksa, error'u temizle.
             setError(null);
         }
         catch (err) {
             if (err instanceof Error) {
-                // Hata varsa error state'e yaz
+                // Hata varsa error state'e yaz.
                 setError(err.message);
                 console.error(err.message);
             }
         }
-    }, [children]); // children değişirse kontrolü tekrar yap
-    return React.createElement("div", { className: "ar-button-group" }, error ? React.createElement(Alert, { status: "danger", message: error }) : children);
+    }, [children]);
+    return React.createElement("div", { className: "har-button-group" }, renderChildren());
 };
 ButtonGroup.displayName = "ButtonGroup";
 export default ButtonGroup;

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

@@ -0,0 +1,8 @@
+import { IBorderProps, IColorProps, IUpperCaseProps, IValidationProps, IVariantProps } from "../../../libs/infrastructure/types/IGlobalProps";
+type Props = {
+    label?: string;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+} & IVariantProps<{
+    component: "checkbox";
+}> & IColorProps & IBorderProps & IUpperCaseProps & IValidationProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "size" | "color">;
+export default Props;

package/dist/components/form/checkbox/Props.js

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

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

@@ -1,5 +1,9 @@
 import React from "react";
-import IProps from "./IProps";
-import "../../../assets/css/components/form/checkbox/checkbox.css";
-declare const Checkbox: React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLInputElement>>;
+import "../../../assets/css/components/form/checkbox/styles.css";
+declare const Checkbox: React.ForwardRefExoticComponent<{
+    label?: string;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+} & import("../../../libs/infrastructure/types/IGlobalProps").IVariantProps<{
+    component: "checkbox";
+}> & import("../../../libs/infrastructure/types/IGlobalProps").IColorProps & import("../../../libs/infrastructure/types/IGlobalProps").IBorderProps & import("../../../libs/infrastructure/types/IGlobalProps").IUpperCaseProps & import("../../../libs/infrastructure/types/IGlobalProps").IValidationProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, "color" | "children" | "size"> & React.RefAttributes<HTMLInputElement>>;
 export default Checkbox;

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

@@ -1,13 +1,21 @@
 "use client";
 import Utils from "../../../libs/infrastructure/shared/Utils";
-import React, { forwardRef, useRef } from "react";
-import "../../../assets/css/components/form/checkbox/checkbox.css";
-const Checkbox = forwardRef(({ label, color = "blue", border = { radius: "sm" }, upperCase, ...attributes }, ref) => {
+import React, { forwardRef, useImperativeHandle, useRef } from "react";
+import "../../../assets/css/components/form/checkbox/styles.css";
+const Checkbox = forwardRef(({ label, variant, color = "blue", border = { radius: "4" }, size = "sm", upperCase, validation, ...attributes }, ref) => {
     // refs
     const _checkbox = useRef(null);
-    const _checkboxClassName = ["ar-checkbox"];
-    _checkboxClassName.push(...Utils.GetClassName("filled", undefined, attributes.checked ? color : "light", border, undefined, undefined, attributes.className));
-    return (React.createElement("div", { className: "ar-checkbox-wrapper" },
+    const _checkboxClassName = ["har-checkbox"];
+    const _innerRef = useRef(null);
+    _checkboxClassName.push(...Utils.GetClassName(variant ?? "outlined", undefined, validation?.text ? "red" : (color ?? "blue"), border ?? { radius: "4" }, undefined, undefined, attributes.className));
+    if (size)
+        _checkboxClassName.push(size);
+    if (attributes.disabled)
+        _checkboxClassName.push("disabled");
+    // hooks
+    // Dışarıdan gelen ref'i _innerRef'e bağla.
+    useImperativeHandle(ref, () => _innerRef.current);
+    return (React.createElement("div", { className: "har-checkbox-wrapper" },
         React.createElement("label", null,
             React.createElement("input", { ref: ref, type: "checkbox", ...attributes, size: 0, onChange: (event) => {
                     // (() => {
@@ -18,7 +26,8 @@ const Checkbox = forwardRef(({ label, color = "blue", border = { radius: "sm" },
                 } }),
             React.createElement("span", null,
                 React.createElement("span", { ref: _checkbox, className: _checkboxClassName.map((c) => c).join(" ") }),
-                label && React.createElement("span", { className: "label" }, upperCase ? label.toUpperCase() : label)))));
+                label && React.createElement("span", { className: "label" }, upperCase ? label.toUpperCase() : label))),
+        validation?.text && React.createElement("div", { className: "har-validation-text" }, validation.text)));
 });
 Checkbox.displayName = "Checkbox";
 export default Checkbox;

package/dist/components/form/checkbox-card/Props.d.ts

@@ -0,0 +1,7 @@
+import { ComponentProps } from "react";
+import { IChildrenProps } from "../../../libs/infrastructure/types/IGlobalProps";
+import Checkbox from "../checkbox";
+interface IProps extends IChildrenProps, Omit<ComponentProps<typeof Checkbox>, "children" | "upperCase"> {
+    orientation?: "horizontal" | "vertical";
+}
+export default IProps;

package/dist/components/form/checkbox-card/index.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import IProps from "./Props";
+import "../../../assets/css/components/form/checkbox-card/styles.css";
+declare const CheckboxCard: {
+    ({ children, variant, color, border, orientation, ...attributes }: IProps): React.JSX.Element;
+    displayName: string;
+    Title({ children }: {
+        children: string;
+    }): React.JSX.Element;
+    Description({ children }: {
+        children: string;
+    }): React.JSX.Element;
+};
+export default CheckboxCard;

package/dist/components/form/checkbox-card/index.js

@@ -0,0 +1,39 @@
+"use client";
+import React, { useState } from "react";
+import Checkbox from "../checkbox";
+import Flex from "../../data-display/grid-system/flex/Flex";
+import Utils from "../../../libs/infrastructure/shared/Utils";
+import "../../../assets/css/components/form/checkbox-card/styles.css";
+import Title from "../../data-display/typography/title/Title";
+import Paragraph from "../../data-display/typography/paragraph/Paragraph";
+const CheckboxCard = function ({ children, variant = "surface", color = "blue", border = { radius: "6" }, orientation, ...attributes }) {
+    // states
+    const [internalChecked, setInternalChecked] = useState(attributes.defaultChecked ?? false);
+    // controlled / uncontrolled ayrımı
+    const isControlled = attributes.checked !== undefined;
+    const isChecked = isControlled ? (attributes.checked ?? false) : internalChecked;
+    // methods
+    const getCardClassName = (checked) => {
+        const classNames = ["har-checkbox-card", checked ? "checked" : "unchecked"];
+        classNames.push(...Utils.GetClassName(attributes.disabled ? "surface-borderless" : variant, undefined, attributes.disabled ? "gray" : color, border, undefined, undefined, undefined));
+        return classNames.join(" ");
+    };
+    const handleChange = (event) => {
+        const nextChecked = event.target.checked;
+        if (!isControlled)
+            setInternalChecked(nextChecked);
+        attributes.onChange?.({
+            ...event,
+            target: { ...event.target, checked: nextChecked },
+        });
+    };
+    return (React.createElement("div", { className: "har-checkbox-card-wrapper" },
+        React.createElement("div", { className: getCardClassName(isChecked) },
+            React.createElement(Flex, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", gap: "var(--space-16)" },
+                React.createElement(Flex, { flexDirection: orientation == "horizontal" ? "row" : "column" }, children),
+                React.createElement(Checkbox, { variant: "filled", color: color, checked: isChecked, onChange: handleChange, disabled: attributes.disabled })))));
+};
+CheckboxCard.displayName = "CheckboxCard";
+export default CheckboxCard;
+CheckboxCard.Title = ({ children }) => (React.createElement(Title, { Level: "h4", style: { fontWeight: 600 } }, children));
+CheckboxCard.Description = ({ children }) => React.createElement(Paragraph, { size: "xs" }, children);

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

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

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

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

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

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

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

@@ -0,0 +1,54 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import Alert from "../../feedback/alert";
+import Checkbox from "../checkbox";
+import Flex from "../../data-display/grid-system/flex/Flex";
+import Title from "../../data-display/typography/title/Title";
+import CheckboxCard from "../checkbox-card";
+const CheckboxGroup = ({ children, title, columns, 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;
+                const clonedChild = React.cloneElement(child, {
+                    ...groupProps,
+                    ...child.props,
+                    color: validation?.text ? "red" : childProps.color || groupProps.color,
+                });
+                if (columns) {
+                    return React.createElement(Flex, { flex: `0 0 calc(${100 / columns}% - var(--space-16))` }, clonedChild);
+                }
+                return clonedChild;
+            }
+            return child;
+        });
+    };
+    // useEffects
+    useEffect(() => {
+        try {
+            React.Children.forEach(children, (child) => {
+                if (!React.isValidElement(child) || (child.type !== Checkbox && child.type !== CheckboxCard)) {
+                    throw new Error("It can only have (Checkbox || CheckboxCard) elements as children.");
+                }
+            });
+            setError(null);
+        }
+        catch (err) {
+            if (err instanceof Error) {
+                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, { flexWrap: columns ? "wrap" : "nowrap", flexDirection: orientation == "horizontal" ? "row" : "column", justifyContent: "space-between", gap: "var(--space-6)" }, renderChildren()),
+        validation?.text && React.createElement("div", { className: "har-validation-text" }, validation.text)));
+};
+CheckboxGroup.displayName = "CheckboxGroup";
+export default CheckboxGroup;

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

@@ -1,10 +1,11 @@
-import { IBorderProps, IColorProps, IStatusProps, IValidationProps, IVariantProps } from "../../../libs/infrastructure/types/IGlobalProps";
-type Props = {
+import { ComponentProps } from "react";
+import Input from "../input";
+interface IProps extends Omit<ComponentProps<typeof Input>, "onChange"> {
     onChange: (value: string) => void;
     config?: {
         locale?: Intl.LocalesArgument;
         isClock?: boolean;
         isFooterButton?: boolean;
     };
-} & IVariantProps & IColorProps & IStatusProps & IBorderProps & IValidationProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "onChange" | "color">;
-export default Props;
+}
+export default IProps;

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

@@ -1,5 +1,5 @@
 import React from "react";
 import "../../../assets/css/components/form/date-picker/date-picker.css";
-import Props from "./Props";
-declare const DatePicker: React.FC<Props>;
+import IProps from "./Props";
+declare const DatePicker: React.FC<IProps>;
 export default DatePicker;