@harjs/react-ui 1.1.9 → 1.1.10

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/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.10",
   "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;
-  }
-}