@harjs/react-ui 1.1.9 → 1.1.11

package/dist/assets/css/components/form/switch/css.cjs

@@ -0,0 +1,40 @@
+const fs = require("fs");
+const path = require("path");
+const { execSync } = require("child_process");
+
+const colors = ["blue", "purple", "pink", "red", "orange", "yellow", "green", "teal", "cyan", "gray"];
+const radiuses = ["0", "2", "4", "6", "8", "12", "16", "20", "40", "full"];
+const sizes = [
+  { name: "xs", "w/h": "1rem", fontSize: "0.75rem" },
+  { name: "sm", "w/h": "1.25rem", fontSize: "1rem" },
+  { name: "md", "w/h": "1.5rem", fontSize: "1.25rem" },
+];
+
+const colorTemplate = fs.readFileSync("templates/color.template.css", "utf-8");
+const radiusTemplate = fs.readFileSync("templates/radius.template.css", "utf-8");
+const sizeTemplate = fs.readFileSync("templates/size.template.css", "utf-8");
+
+let colorOutput = `.har-switch {${colors.map((color) => colorTemplate.replace(/__COLOR__/g, color)).join("\n")}}`;
+let radiusOutput = `.har-switch, .har-switch > .handle {${radiuses.map((radius) => radiusTemplate.replace(/__RADIUS__/g, radius)).join("\n")}}`;
+let sizeOutput = `.har-switch {${sizes
+  .map((size) =>
+    sizeTemplate
+      .replace(/__SIZE__/g, `size-${size.name}`)
+      .replace(/__SIZE_NUMBER__/g, size["w/h"])
+      .replace(/__FONT_SIZE__/g, size.fontSize),
+  )
+  .join("\n")}}`;
+
+fs.writeFileSync("color.css", colorOutput);
+fs.writeFileSync("radius.css", radiusOutput);
+fs.writeFileSync("size.css", sizeOutput);
+
+try {
+  execSync(`npx prettier --write color.css`, { stdio: "inherit" });
+  execSync(`npx prettier --write radius.css`, { stdio: "inherit" });
+  execSync(`npx prettier --write size.css`, { stdio: "inherit" });
+
+  execSync("npm run no-css-build", { stdio: "inherit" });
+} catch (err) {
+  console.error("⚠️ Prettier çalıştırılamadı:", err.message);
+}

package/dist/assets/css/components/form/switch/radius.css

@@ -0,0 +1,42 @@
+.har-switch,
+.har-switch > .handle {
+  &.radius-0 {
+    border-radius: var(--radius-0);
+  }
+
+  &.radius-2 {
+    border-radius: var(--radius-2);
+  }
+
+  &.radius-4 {
+    border-radius: var(--radius-4);
+  }
+
+  &.radius-6 {
+    border-radius: var(--radius-6);
+  }
+
+  &.radius-8 {
+    border-radius: var(--radius-8);
+  }
+
+  &.radius-12 {
+    border-radius: var(--radius-12);
+  }
+
+  &.radius-16 {
+    border-radius: var(--radius-16);
+  }
+
+  &.radius-20 {
+    border-radius: var(--radius-20);
+  }
+
+  &.radius-40 {
+    border-radius: var(--radius-40);
+  }
+
+  &.radius-full {
+    border-radius: var(--radius-full);
+  }
+}

package/dist/assets/css/components/form/switch/size.css

@@ -0,0 +1,28 @@
+.har-switch {
+  &.size-xs {
+    width: 1rem;
+    height: 1rem;
+
+    + .label {
+      font-size: 0.75rem;
+    }
+  }
+
+  &.size-sm {
+    width: 1.25rem;
+    height: 1.25rem;
+
+    + .label {
+      font-size: 1rem;
+    }
+  }
+
+  &.size-md {
+    width: 1.5rem;
+    height: 1.5rem;
+
+    + .label {
+      font-size: 1.25rem;
+    }
+  }
+}

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

@@ -1,6 +1,8 @@
-@import url("./core/border.css");
+@import url("./color.css");
+@import url("./size.css");
+@import url("./radius.css");
 
-.ar-switch-wrapper {
+.har-switch-wrapper {
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
@@ -18,7 +20,7 @@
     > input[type="checkbox"] {
       display: none;
 
-      + .ar-switch {
+      + .har-switch {
         > .handle {
           position: absolute;
           top: 50%;
@@ -40,7 +42,7 @@
       }
 
       &.checked {
-        + .ar-switch {
+        + .har-switch {
           > .handle {
             left: calc(2.25rem - 1rem);
             border: none;
@@ -50,7 +52,7 @@
       }
     }
 
-    > .ar-switch {
+    > .har-switch {
       position: relative;
       display: inline-block;
       width: 2.25rem;

package/dist/assets/css/components/form/switch/templates/color.template.css

@@ -0,0 +1,71 @@
+&.__COLOR__ {
+  &.filled {
+    background-color: var(--__COLOR__-500);
+
+    &:hover {
+      background-color: var(--__COLOR__-400);
+    }
+
+    &:active {
+      background-color: var(--__COLOR__-600);
+    }
+  }
+
+  &.surface {
+    background-color: var(--__COLOR__-300);
+    border: solid var(--stroke-1) var(--__COLOR__-200);
+    color: var(--__COLOR__-700);
+
+    &:hover {
+      background-color: var(--__COLOR__-200);
+    }
+
+    &:active {
+      background-color: var(--__COLOR__-300);
+      border: solid var(--stroke-1) var(--__COLOR__-300);
+    }
+  }
+
+  &.surface-borderless {
+    background-color: var(--__COLOR__-100);
+    border: solid var(--stroke-1) transparent;
+    color: var(--__COLOR__-700);
+
+    &:hover {
+      background-color: var(--__COLOR__-200);
+    }
+
+    &:active {
+      background-color: var(--__COLOR__-300);
+      border: solid var(--stroke-1) var(--__COLOR__-300);
+    }
+  }
+
+  &.outlined {
+    border: solid var(--stroke-1) var(--__COLOR__-500);
+    color: var(--__COLOR__-700);
+
+    &:hover {
+      background-color: var(--__COLOR__-100);
+    }
+
+    &:active {
+      background-color: var(--__COLOR__-200);
+    }
+  }
+
+  &.dashed {
+    border: dashed var(--stroke-1) var(--__COLOR__-500);
+    color: var(--__COLOR__-700);
+
+    &:hover {
+      border: dashed var(--stroke-1) var(--__COLOR__-300);
+      color: var(--__COLOR__-300);
+    }
+
+    &:active {
+      border: dashed var(--stroke-1) var(--__COLOR__-500);
+      color: var(--__COLOR__-700);
+    }
+  }
+}

package/dist/assets/css/components/form/switch/templates/radius.template.css

@@ -0,0 +1,3 @@
+&.radius-__RADIUS__ {
+  border-radius: var(--radius-__RADIUS__);
+}

package/dist/assets/css/components/form/switch/templates/size.template.css

@@ -0,0 +1,8 @@
+&.__SIZE__ {
+  width: __SIZE_NUMBER__;
+  height: __SIZE_NUMBER__;
+
+  + .label {
+    font-size: __FONT_SIZE__;
+  }
+}

package/dist/components/data-display/typography/paragraph/Paragraph.js

@@ -7,7 +7,7 @@ const Paragraph = ({ children, color, align = "left", size = "md", upperCase = f
     if (color)
         _className.push(color);
     if (size)
-        _className.push(size);
+        _className.push(`size-${size}`);
     return (React.createElement("p", { className: _className.map((c) => c).join(" ") }, typeof children === "string" && upperCase ? children.toLocaleUpperCase() : children));
 };
 Paragraph.displayName = "Paragraph";

package/dist/components/data-display/typography/title/IProps.d.ts

@@ -2,6 +2,5 @@ import { IChildrenProps, IUpperCaseProps } from "../../../../libs/infrastructure
 interface IProps extends IChildrenProps, IUpperCaseProps, React.HTMLAttributes<HTMLHeadingElement> {
     Level: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
     align?: "left" | "center" | "right";
-    size?: "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large" | "xx-large" | "xxx-large" | "smaller" | "larger";
 }
 export default IProps;

package/dist/components/data-display/typography/title/Title.js

@@ -1,13 +1,11 @@
 "use client";
-import React, { useRef } from "react";
-const Title = ({ children, Level, align = "left", size, upperCase = false, ...attributes }) => {
+import React from "react";
+const Title = ({ children, Level, align = "left", upperCase = false, ...attributes }) => {
     // refs
-    let _className = useRef("ar-typography-title").current;
+    let _className = ["har-typography-title"];
     if (align)
-        _className += ` ${align}`;
-    if (size)
-        _className += ` ${size}`;
-    return (React.createElement(Level, { className: _className, ...attributes }, typeof children === "string" && upperCase ? children.toLocaleUpperCase() : children));
+        _className.push(align);
+    return (React.createElement(Level, { className: _className.map((c) => c).join(" "), ...attributes }, typeof children === "string" && upperCase ? children.toLocaleUpperCase() : children));
 };
 Title.displayName = "Title";
 export default Title;

package/dist/components/feedback/drawer/IProps.d.ts

@@ -1,7 +1,8 @@
-import { TabProps, ValidationProps } from "../../../libs/infrastructure/types";
-import { IChildrenProps, ISizeProps } from "../../../libs/infrastructure/types/IGlobalProps";
-interface IProps<T extends object> extends IChildrenProps, ISizeProps {
+import { DrawerSizes, TabProps, ValidationProps } from "../../../libs/infrastructure/types";
+import { IChildrenProps } from "../../../libs/infrastructure/types/IGlobalProps";
+interface IProps<T extends object> extends IChildrenProps {
     title?: string;
+    size?: DrawerSizes;
     tabs: TabProps[];
     activeTab?: number;
     open: {

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

@@ -4,11 +4,11 @@ import Typography from "../../data-display/typography";
 import "../../../assets/css/components/feedback/drawer/styles.css";
 import { useValidation } from "../../../libs/core/application/hooks";
 const { Title } = Typography;
-const Drawer = function ({ title, tabs = [], activeTab, open, size = "xxl", onChange, validation, config, }) {
+const Drawer = function ({ title, tabs = [], activeTab, open, size = "2xl", onChange, validation, config, }) {
     // refs
     const _drawer = useRef(null);
     const _drawerWrapperClassName = ["har-drawer-wrapper"];
-    const _drawerClassName = ["har-drawer", size];
+    const _drawerClassName = ["har-drawer", `size-${size}`];
     if (Object.keys(open).length > 0 && open.get)
         _drawerWrapperClassName.push("opened");
     else

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

@@ -1,8 +1,7 @@
-import { IBorderProps, IColorProps, IUpperCaseProps, IValidationProps, IVariantProps } from "../../../libs/infrastructure/types/IGlobalProps";
+import { IBorderProps, IColorProps, ISizeProps, 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">;
+}> & IColorProps & IBorderProps & ISizeProps & IUpperCaseProps & IValidationProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "size" | "color">;
 export default Props;

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

@@ -2,8 +2,7 @@ import React from "react";
 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>>;
+}> & import("../../../libs/infrastructure/types/IGlobalProps").IColorProps & import("../../../libs/infrastructure/types/IGlobalProps").IBorderProps & import("../../../libs/infrastructure/types/IGlobalProps").ISizeProps & 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

@@ -7,9 +7,7 @@ const Checkbox = forwardRef(({ label, variant, color = "blue", border = { radius
     const _checkbox = useRef(null);
     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);
+    _checkboxClassName.push(...Utils.GetClassName(variant ?? "outlined", undefined, validation?.text ? "red" : (color ?? "blue"), border ?? { radius: "4" }, size, undefined, attributes.className));
     if (attributes.disabled)
         _checkboxClassName.push("disabled");
     // hooks

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

@@ -100,7 +100,7 @@ const BaseInput = forwardRef(({ children, variant = "outlined", color = "gray",
             setLabelWidth(width);
         }
     }, [value, attributes.placeholder]);
-    return (React.createElement("div", { className: _wrapperClassName.map((c) => c).join(" ") },
+    return (React.createElement("div", { className: _wrapperClassName.map((c) => c).join(" "), ...(validation?.text ? { style: { marginBottom: "var(--space-20)" } } : {}) },
         renderAddon("before"),
         React.createElement("div", { className: "har-input" },
             renderIcon() && React.createElement("div", { className: "icon-element" }, renderIcon()),

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

@@ -6,7 +6,9 @@ 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 = "gray", border = { radius: "4" }, style, options, value, onChange, onSearch, onClick, onCreate, multiple, placeholder, validation, upperCase, disabled, readOnly, config = { clear: true, validation: { text: "visible" } }, }) => {
+import Button from "../button";
+const Select = ({ variant = "outlined", status, color = "gray", border = { radius: "4" }, size, style, options, value, onChange, onSearch, onClick, onCreate, multiple, placeholder, validation, upperCase, disabled, readOnly, config = { clear: true, validation: { text: "visible" } }, }) => {
+    const _mWrapperClassName = ["wrapper"];
     const _selectionClassName = ["selections"];
     // refs
     const _arSelect = useRef(null);
@@ -28,7 +30,7 @@ const Select = ({ variant = "outlined", status, color = "gray", border = { radiu
     // 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" : "gray", border, undefined, undefined, undefined));
+    _selectionClassName.push(...Utils.GetClassName(variant, undefined, validation?.text ? "red" : "gray", border, size, undefined, undefined));
     // methods
     const handleClickOutSide = (event) => {
         const target = event.target;
@@ -188,7 +190,6 @@ const Select = ({ variant = "outlined", status, color = "gray", border = { radiu
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [optionsOpen]);
-    // arama metni değiştiğinde filtrele
     useEffect(() => {
         if (searchText.length > 0 && onSearch) {
             onSearch(searchText);
@@ -227,9 +228,9 @@ const Select = ({ variant = "outlined", status, color = "gray", border = { radiu
         });
     }, [navigationIndex]);
     const handleBlur = () => setOptionsOpen(false);
-    return (React.createElement("div", { ref: _arSelect, className: "ar-select-wrapper" },
-        React.createElement("div", { ref: _multipleInput, className: "ar-select" },
-            multiple ? (React.createElement("div", { className: "wrapper" },
+    return (React.createElement("div", { ref: _arSelect, className: "har-select-wrapper" },
+        React.createElement("div", { ref: _multipleInput, className: "har-select" },
+            multiple ? (React.createElement("div", { className: _mWrapperClassName.map((c) => c).join(" ") },
                 React.createElement("div", { ...(value.length > 0
                         ? {
                             style: {
@@ -249,13 +250,13 @@ const Select = ({ variant = "outlined", status, color = "gray", border = { radiu
                         onClick && onClick();
                         setOptionsOpen((prev) => !prev);
                     } },
-                    React.createElement("div", { className: "items" }, value.map((_value, index) => (React.createElement(Chip, { key: index, variant: status?.selected?.variant || "filled", color: status?.selected?.color || status?.color, text: _value.text }))))),
+                    React.createElement("div", { className: "items" }, value.map((_value, index) => (React.createElement(Chip, { key: index, variant: status?.selected?.variant || "filled", color: status?.selected?.color || status?.color, text: _value.text, size: size }))))),
                 React.createElement("span", { ref: _placeholder, className: `placeholder ${value.length > 0 ? "visible" : "hidden"}`, onClick: () => {
                         onClick && onClick();
                         setOptionsOpen((prev) => !prev);
                     } },
                     validation ? "* " : "",
-                    placeholder))) : (React.createElement(Input, { ref: _singleInput, style: { ...style, paddingRight: config.clear === false ? "1.5rem" : "3.5rem" }, variant: variant, color: !Utils.IsNullOrEmpty(validation?.text) ? "red" : color, border: { radius: border.radius }, value: singleInputText, onClick: () => {
+                    placeholder))) : (React.createElement(Input, { ref: _singleInput, style: { ...style }, variant: variant, color: !Utils.IsNullOrEmpty(validation?.text) ? "red" : color, border: { radius: border.radius }, size: size, value: singleInputText, onClick: () => {
                     onClick && onClick();
                     setOptionsOpen((prev) => !prev);
                 }, onChange: (event) => {
@@ -270,25 +271,33 @@ const Select = ({ variant = "outlined", status, color = "gray", border = { radiu
                 }, placeholder: placeholder, validation: {
                     ...validation,
                     text: config.validation?.text === "visible" ? validation?.text : "",
-                }, disabled: disabled, readOnly: readOnly })),
-            React.createElement("div", { className: "buttons" },
-                config?.clear === true && (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 ${!disabled && optionsOpen ? "opened" : "closed"}`, onClick: (event) => {
-                        if (disabled)
-                            return;
-                        onClick && onClick();
-                        event.stopPropagation();
-                        setOptionsOpen((prev) => !prev);
-                    } })),
+                }, disabled: disabled, readOnly: readOnly },
+                config?.clear === true && (React.createElement(Input.AddonAfter, null,
+                    React.createElement(Button, { variant: "borderless", color: "red", border: border, size: size, shape: "square", icon: {
+                            element: (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "var(--red-500)", viewBox: "0 0 256 256" },
+                                React.createElement("path", { d: "M204.24,195.76a6,6,0,1,1-8.48,8.48L128,136.49,60.24,204.24a6,6,0,0,1-8.48-8.48L119.51,128,51.76,60.24a6,6,0,0,1,8.48-8.48L128,119.51l67.76-67.75a6,6,0,0,1,8.48,8.48L136.49,128Z" }))),
+                        }, onClick: (event) => {
+                            if (disabled)
+                                return;
+                            event.stopPropagation();
+                            handleCleanSelection();
+                        } }))),
+                React.createElement(Input.AddonAfter, null,
+                    React.createElement(Button, { variant: "borderless", color: color, border: border, size: size, shape: "square", icon: {
+                            element: optionsOpen ? (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "var(--black-100)", viewBox: "0 0 256 256" },
+                                React.createElement("path", { d: "M212.24,164.24a6,6,0,0,1-8.48,0L128,88.49,52.24,164.24a6,6,0,0,1-8.48-8.48l80-80a6,6,0,0,1,8.48,0l80,80A6,6,0,0,1,212.24,164.24Z" }))) : (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "var(--black-100)", viewBox: "0 0 256 256" },
+                                React.createElement("path", { d: "M212.24,100.24l-80,80a6,6,0,0,1-8.48,0l-80-80a6,6,0,0,1,8.48-8.48L128,167.51l75.76-75.75a6,6,0,0,1,8.48,8.48Z" }))),
+                        }, onClick: (event) => {
+                            if (disabled)
+                                return;
+                            onClick && onClick();
+                            event.stopPropagation();
+                            setOptionsOpen((prev) => !prev);
+                        } })))),
             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" },
+            ReactDOM.createPortal(React.createElement("div", { ref: _options, className: "har-select-options" },
                 multiple && (React.createElement("div", { className: "search-field" },
                     React.createElement(Input, { ref: _searchField, variant: "outlined", placeholder: "Search...", value: searchText, onChange: (event) => setSearchText(event.target.value), onClick: (event) => event.stopPropagation() }))),
                 filteredOptions.length > 0 ? (React.createElement("ul", null,

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

@@ -2,16 +2,16 @@
 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: "full" }, ...attributes }, ref) => {
+const Switch = forwardRef(({ label, variant = "filled", color = "blue", border = { radius: "full" }, ...attributes }, ref) => {
     // refs
     let _switchInput = useRef(null);
     let _switch = useRef(null);
     const _inputClassName = [];
-    const _switchClassName = ["ar-switch"];
+    const _switchClassName = ["har-switch"];
     // states
     const [checked, setChecked] = useState(attributes.checked ?? false);
     _inputClassName.push(attributes.checked ? "checked" : "unchecked");
-    _switchClassName.push(...Utils.GetClassName(undefined, undefined, attributes.checked ? color : "gray", border, undefined, undefined, attributes.className));
+    _switchClassName.push(...Utils.GetClassName(variant, 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);
@@ -19,7 +19,7 @@ const Switch = forwardRef(({ label, color, border = { radius: "full" }, ...attri
     useEffect(() => {
         setChecked(attributes.checked ?? false);
     }, [attributes.checked]);
-    return (React.createElement("div", { className: "ar-switch-wrapper" },
+    return (React.createElement("div", { className: "har-switch-wrapper" },
         React.createElement("label", null,
             React.createElement("input", { ref: _switchInput, type: "checkbox", ...attributes, className: _inputClassName.map((c) => c).join(" "), checked: checked, size: 0, onChange: (event) => {
                     event.stopPropagation();
@@ -29,7 +29,7 @@ const Switch = forwardRef(({ label, color, border = { radius: "full" }, ...attri
                     (() => attributes.onChange && attributes.onChange(event))();
                 } }),
             React.createElement("span", { ref: _switch, className: _switchClassName.map((c) => c).join(" ") },
-                React.createElement("span", { className: "handle border-radius-pill" })),
+                React.createElement("span", { className: `handle ${border.radius ? `radius-${border.radius}` : "radius-full"}` })),
             label && React.createElement("span", { className: "label" }, label))));
 });
 Switch.displayName = "Switch";

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

@@ -1,8 +1,7 @@
 import { ComponentProps, Dispatch, SetStateAction } from "react";
-import { StepProps, ValidationProps } from "../../../libs/infrastructure/types";
-import { ISizeProps } from "../../../libs/infrastructure/types/IGlobalProps";
+import { DrawerSizes, StepProps, ValidationProps } from "../../../libs/infrastructure/types";
 import Wizard from ".";
-export interface IProps<TData extends object> extends ISizeProps {
+export interface IProps<TData extends object> {
     data: {
         get: Partial<TData>;
         set: Dispatch<SetStateAction<Partial<TData>>>;
@@ -10,6 +9,7 @@ export interface IProps<TData extends object> extends ISizeProps {
     name: string;
     title?: string;
     description?: string;
+    size?: DrawerSizes;
     steps: StepProps[];
     currentStep?: number;
     onChange: (currentStep: number) => void;

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

@@ -10,7 +10,7 @@ class Utils {
         if (border)
             classNames.push(`radius-${border.radius}`);
         if (size)
-            classNames.push(size);
+            classNames.push(`size-${size}`);
         if (icon && icon.element) {
             classNames.push("icon");
             classNames.push(`icon-${icon.position || "start"}`);

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

@@ -70,7 +70,7 @@ export interface IBorderProps {
      * - `sm`: Small radius.
      * - `lg`: Large radius.
      * - `xl`: Extra-large radius.
-     * - `xxl`: Double extra-large radius.
+     * - `2xl`: Double extra-large radius.
      * - `pill`: Fully rounded capsule shape.
      * - `none`: Sharp corners (no radius).
      *
@@ -108,20 +108,6 @@ export interface IIconProps {
     icon?: Icon;
 }
 export interface ISizeProps {
-    /**
-     * Defines the overall scale and sizing of the component.
-     *
-     * - `large`: Scaled-up layout for prominence.
-     * - `normal`: Standard layout size (Default).
-     * - `small`: Compact layout for tight spaces.
-     *
-     * @example
-     * ```jsx
-     * <Component size="large">
-     * Large Layout
-     * </Component>
-     * ```
-     */
     size?: Sizes;
 }
 export interface IUpperCaseProps {

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

@@ -9,7 +9,8 @@ export type Border = {
     radius: BorderRadiuses;
 };
 export type BorderRadiuses = "0" | "2" | "4" | "6" | "8" | "12" | "16" | "20" | "40" | "full";
-export type Sizes = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+export type Sizes = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+export type DrawerSizes = Sizes | "3xl" | "4xl" | "5xl" | "6xl" | "full";
 export type Icon = {
     element: React.JSX.Element;
     position?: "start" | "end";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@harjs/react-ui",
-  "version": "1.1.9",
+  "version": "1.1.11",
   "publishConfig": {
     "access": "public"
   },

package/dist/assets/css/components/data-display/typography/title/size.css

@@ -1,41 +0,0 @@
-& {
-  &.xx-small {
-    font-size: 0.8rem; /* 12.8px (0.8 * 16) */
-  }
-
-  &.x-small {
-    font-size: 1rem; /* 16px */
-  }
-
-  &.small {
-    font-size: 1.3rem; /* 20.8px (1.3 * 16) */
-  }
-
-  &.medium {
-    font-size: 1.6rem; /* 25.6px (1.6 * 16) */
-  }
-
-  &.large {
-    font-size: 2rem; /* 32px (2 * 16) */
-  }
-
-  &.x-large {
-    font-size: 2.5rem; /* 40px (2.5 * 16) */
-  }
-
-  &.xx-large {
-    font-size: 3rem; /* 48px (3 * 16) */
-  }
-
-  &.xxx-large {
-    font-size: 4rem; /* 64px (4 * 16) */
-  }
-
-  &.smaller {
-    font-size: smaller;
-  }
-
-  &.larger {
-    font-size: larger;
-  }
-}