@harjs/react-ui 1.1.5 → 1.1.7

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

@@ -0,0 +1,8 @@
+const WizardEN = {
+    "Wizard.Title": "Details",
+    "Wizard.Title.Complete": "complete",
+    "Wizard.Button.Back": "Back",
+    "Wizard.Button.NextStep": "Next Step",
+    "Wizard.Button.Complete": "Complete the Wizard",
+};
+export default WizardEN;

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

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

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

@@ -0,0 +1,8 @@
+const WizardTR = {
+    "Wizard.Title": "Detaylar",
+    "Wizard.Title.Complete": "tamamlandı",
+    "Wizard.Button.Back": "Geri",
+    "Wizard.Button.NextStep": "Sonraki Adım",
+    "Wizard.Button.Complete": "Sihirbazı Tamamla",
+};
+export default WizardTR;

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

@@ -8,7 +8,7 @@ class Utils {
         if (color)
             classNames.push(color);
         if (border)
-            classNames.push(`border-radius-${border.radius}`);
+            classNames.push(`radius-${border.radius}`);
         if (size)
             classNames.push(size);
         if (icon && icon.element) {

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

@@ -14,6 +14,12 @@ export interface IChildrenProps {
      */
     children?: React.ReactNode;
 }
+type ExcludedVariantsMap = {
+    alert: "outlined" | "borderless";
+    card: "dashed" | "borderless";
+    checkbox: "borderless";
+    input: "surface";
+};
 export interface IVariantProps<T extends {
     component?: string;
 } = {}> {
@@ -30,7 +36,7 @@ export interface IVariantProps<T extends {
      * <Component variant="filled">Hello, World!</Component>
      * ```
      */
-    variant?: T["component"] extends "alert" ? Exclude<Variants, "outlined" | "borderless"> : T["component"] extends "card" ? Exclude<Variants, "dashed" | "borderless"> : Variants;
+    variant?: T["component"] extends keyof ExcludedVariantsMap ? Exclude<Variants, ExcludedVariantsMap[T["component"]]> : Variants;
 }
 export interface IStatusProps<T extends {
     component?: string;
@@ -43,7 +49,7 @@ export interface IStatusProps<T extends {
      * <Component status="success">Success Message</Component>
      * ```
      */
-    status?: T["component"] extends "alert" ? Exclude<Status, "primary-light" | "secondary" | "information" | "dark" | "light"> : T["component"] extends "card" ? Exclude<Status, "primary-light" | "secondary" | "information" | "dark" | "light"> : Status;
+    status?: T["component"] extends "alert" ? Exclude<Status, "primary-light" | "secondary" | "information" | "dark"> : T["component"] extends "card" ? Exclude<Status, "primary-light" | "secondary" | "information" | "dark"> : Status;
 }
 export interface IColorProps {
     /**
@@ -70,7 +76,7 @@ export interface IBorderProps {
      *
      * @example
      * ```jsx
-     * <Component border={{ radius: "sm" }}>
+     * <Component border={{ radius: "4" }}>
      * Content
      * </Component>
      * ```
@@ -181,3 +187,4 @@ export interface IDisabledProps {
      */
     disabled?: boolean;
 }
+export {};

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

@@ -1,13 +1,15 @@
 import React from "react";
-export type Variants = "filled" | "surface" | "outlined" | "dashed" | "borderless";
-export type Status = "primary" | "primary-light" | "secondary" | "success" | "danger" | "warning" | "information" | "dark" | "light";
-export type Color = "blue" | "purple" | "pink" | "red" | "orange" | "yellow" | "green" | "teal" | "cyan" | "gray" | "light";
-export type ParagraphColors = "gray-100" | "gray-200" | "gray-300" | "gray-400" | "gray-500" | "gray-600" | "gray-700" | "gray-800" | "gray-900";
+export type Variants = "filled" | "surface" | "surface-borderless" | "outlined" | "dashed" | "borderless";
+export type Status = "primary" | "secondary" | "success" | "danger" | "warning" | "information";
+export type GrayColorScale = "gray-50" | "gray-100" | "gray-200" | "gray-300" | "gray-400" | "gray-500" | "gray-600" | "gray-700" | "gray-800" | "gray-900";
+export type Color = "blue" | "purple" | "pink" | "red" | "orange" | "yellow" | "green" | "teal" | "cyan" | "gray";
+export type ParagraphColors = Color | GrayColorScale;
+export type CardColors = Color | GrayColorScale;
 export type Border = {
     radius: BorderRadiuses;
 };
-export type BorderRadiuses = "sm" | "lg" | "xl" | "xxl" | "pill" | "none";
-export type Sizes = "large" | "normal" | "small";
+export type BorderRadiuses = "0" | "2" | "4" | "6" | "8" | "12" | "16" | "20" | "40" | "full";
+export type Sizes = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
 export type Icon = {
     element: React.JSX.Element;
     position?: "start" | "end";
@@ -35,6 +37,7 @@ export interface NavigationMenuProps {
 export type MenuItemVariants = "vertical" | "horizontal";
 /** Holds content mapping configurations for segmented wizard or tracking interfaces. */
 export interface StepProps {
+    key: string;
     title: string;
     content: React.ReactNode;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@harjs/react-ui",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "publishConfig": {
     "access": "public"
   },
@@ -40,6 +40,7 @@
   },
   "scripts": {
     "build": "npm run clean && tsc && npm run css-loader && cp -r ./src/assets dist/",
+    "no-css-build": "npm run clean && tsc && cp -r ./src/assets dist/",
     "css-loader": "node src/scripts/index.cjs",
     "clean": "rm -rf dist/"
   },
@@ -63,6 +64,7 @@
     "@types/node": "^25.9.2",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
+    "prettier": "^3.9.4",
     "ts-node": "^10.9.2",
     "tslib": "^2.8.1",
     "typescript": "^6.0.3"

package/dist/assets/css/components/data-display/card/statuses.css

@@ -1,377 +0,0 @@
-/* #region PRIMARY */
-.ar-card {
-  &.filled {
-    &.primary {
-      background-color: var(--blue-400);
-      border: solid 1px var(--blue-500) !important;
-      color: var(--white);
-
-      > .title {
-        border-bottom: solid 1px var(--blue-500) !important;
-      }
-    }
-  }
-  &.surface {
-    &.primary {
-      background-color: var(--white);
-      border: solid 1px var(--blue-500) !important;
-      color: var(--gray-700);
-
-      > .title {
-        background-color: var(--blue-100);
-        border-bottom: solid 1px var(--blue-200) !important;
-        color: var(--blue-500) !important;
-      }
-    }
-  }
-  &.outlined {
-    &.primary {
-      background-color: transparent;
-      border: solid 1px var(--blue-500);
-      color: var(--blue-500);
-
-      > .title {
-        background-color: var(--gray-100);
-        border-bottom: solid 1px var(--blue-100) !important;
-      }
-    }
-  }
-}
-/* #endregion */
-/* PRIMARY */
-
-/* #region PRIMARY-LIGHT */
-.ar-card {
-  &.filled {
-    &.primary-light {
-      background-color: var(--light-400);
-      border: solid 1px var(--light-500) !important;
-      color: var(--gray-700);
-
-      > .title {
-        border-bottom: solid 1px var(--light-500) !important;
-      }
-    }
-  }
-  &.surface {
-    &.primary-light {
-      background-color: var(--white);
-      border: solid 1px var(--light-500) !important;
-      color: var(--gray-700);
-
-      > .title {
-        background-color: var(--light-100);
-        border-bottom: solid 1px var(--light-200) !important;
-        color: var(--light-500) !important;
-      }
-    }
-  }
-  &.outlined {
-    &.primary-light {
-      background-color: transparent;
-      border: solid 1px var(--light-500);
-      color: var(--light-500);
-
-      > .title {
-        background-color: var(--gray-100);
-        border-bottom: solid 1px var(--light-100) !important;
-      }
-    }
-  }
-}
-/* #endregion */
-/* PRIMARY-LIGHT */
-
-/* #region SECONDARY */
-.ar-card {
-  &.filled {
-    &.secondary {
-      background-color: var(--light-400);
-      border: solid 1px var(--light-500) !important;
-      color: var(--gray-700);
-
-      > .title {
-        border-bottom: solid 1px var(--light-500) !important;
-      }
-    }
-  }
-  &.surface {
-    &.secondary {
-      background-color: var(--white);
-      border: solid 1px var(--light-500) !important;
-      color: var(--gray-700);
-
-      > .title {
-        background-color: var(--light-100);
-        border-bottom: solid 1px var(--light-200) !important;
-        color: var(--light-500) !important;
-      }
-    }
-  }
-  &.outlined {
-    &.secondary {
-      background-color: transparent;
-      border: solid 1px var(--light-500);
-      color: var(--light-500);
-
-      > .title {
-        background-color: var(--gray-100);
-        border-bottom: solid 1px var(--light-100) !important;
-      }
-    }
-  }
-}
-/* #endregion */
-/* SECONDARY */
-
-/* #region SUCCESS */
-.ar-card {
-  &.filled {
-    &.success {
-      background-color: var(--green-400);
-      border: solid 1px var(--green-500) !important;
-      color: var(--white);
-
-      > .title {
-        border-bottom: solid 1px var(--green-500) !important;
-      }
-    }
-  }
-  &.surface {
-    &.success {
-      background-color: var(--white);
-      border: solid 1px var(--green-500) !important;
-      color: var(--gray-700);
-
-      > .title {
-        background-color: var(--green-100);
-        border-bottom: solid 1px var(--green-200) !important;
-        color: var(--green-500) !important;
-      }
-    }
-  }
-  &.outlined {
-    &.success {
-      background-color: transparent;
-      border: solid 1px var(--green-500);
-      color: var(--green-500);
-
-      > .title {
-        background-color: var(--gray-100);
-        border-bottom: solid 1px var(--green-100) !important;
-      }
-    }
-  }
-}
-/* #endregion */
-/* SUCCESS */
-
-/* #region WARNING */
-.ar-card {
-  &.filled {
-    &.warning {
-      background-color: var(--orange-400);
-      border: solid 1px var(--orange-500) !important;
-      color: var(--orange-700);
-
-      > .title {
-        border-bottom: solid 1px var(--orange-500) !important;
-      }
-    }
-  }
-  &.surface {
-    &.warning {
-      background-color: var(--white);
-      border: solid 1px var(--orange-500) !important;
-      color: var(--gray-700);
-
-      > .title {
-        background-color: var(--orange-100);
-        border-bottom: solid 1px var(--orange-200) !important;
-        color: var(--orange-500) !important;
-      }
-    }
-  }
-  &.outlined {
-    &.warning {
-      background-color: transparent;
-      border: solid 1px var(--orange-500);
-      color: var(--orange-500);
-
-      > .title {
-        background-color: var(--gray-100);
-        border-bottom: solid 1px var(--orange-100) !important;
-      }
-    }
-  }
-}
-/* #endregion */
-/* WARNING */
-
-/* #region DANGER */
-.ar-card {
-  &.filled {
-    &.danger {
-      background-color: var(--red-400);
-      border: solid 1px var(--red-500) !important;
-      color: var(--white);
-
-      > .title {
-        border-bottom: solid 1px var(--red-500) !important;
-      }
-    }
-  }
-  &.surface {
-    &.danger {
-      background-color: var(--white);
-      border: solid 1px var(--red-500) !important;
-      color: var(--gray-700);
-
-      > .title {
-        background-color: var(--red-100);
-        border-bottom: solid 1px var(--red-200) !important;
-        color: var(--red-500) !important;
-      }
-    }
-  }
-  &.outlined {
-    &.danger {
-      background-color: transparent;
-      border: solid 1px var(--red-500);
-      color: var(--red-500);
-
-      > .title {
-        background-color: var(--gray-100);
-        border-bottom: solid 1px var(--red-100) !important;
-      }
-    }
-  }
-}
-/* #endregion */
-/* DANGER */
-
-/* #region INFORMATION */
-.ar-card {
-  &.filled {
-    &.information {
-      background-color: var(--light-400);
-      border: solid 1px var(--light-500) !important;
-      color: var(--gray-700);
-
-      > .title {
-        border-bottom: solid 1px var(--light-500) !important;
-      }
-    }
-  }
-  &.surface {
-    &.information {
-      background-color: var(--white);
-      border: solid 1px var(--light-500) !important;
-      color: var(--gray-700);
-
-      > .title {
-        background-color: var(--light-100);
-        border-bottom: solid 1px var(--light-200) !important;
-        color: var(--light-500) !important;
-      }
-    }
-  }
-  &.outlined {
-    &.information {
-      background-color: transparent;
-      border: solid 1px var(--light-500);
-      color: var(--light-500);
-
-      > .title {
-        background-color: var(--gray-100);
-        border-bottom: solid 1px var(--light-100) !important;
-      }
-    }
-  }
-}
-/* #endregion */
-/* INFORMATION */
-
-/* #region DARK */
-.ar-card {
-  &.filled {
-    &.dark {
-      background-color: var(--light-400);
-      border: solid 1px var(--light-500) !important;
-      color: var(--gray-700);
-
-      > .title {
-        border-bottom: solid 1px var(--light-500) !important;
-      }
-    }
-  }
-  &.surface {
-    &.dark {
-      background-color: var(--white);
-      border: solid 1px var(--light-500) !important;
-      color: var(--gray-700);
-
-      > .title {
-        background-color: var(--light-100);
-        border-bottom: solid 1px var(--light-200) !important;
-        color: var(--light-500) !important;
-      }
-    }
-  }
-  &.outlined {
-    &.dark {
-      background-color: transparent;
-      border: solid 1px var(--light-500);
-      color: var(--light-500);
-
-      > .title {
-        background-color: var(--gray-100);
-        border-bottom: solid 1px var(--light-100) !important;
-      }
-    }
-  }
-}
-/* #endregion */
-/* DARK */
-
-/* #region LIGHT */
-.ar-card {
-  &.filled {
-    &.light {
-      background-color: var(--light-400);
-      border: solid 1px var(--light-500) !important;
-      color: var(--gray-700);
-
-      > .title {
-        border-bottom: solid 1px var(--light-500) !important;
-      }
-    }
-  }
-  &.surface {
-    &.light {
-      background-color: var(--white);
-      border: solid 1px var(--light-500) !important;
-      color: var(--gray-700);
-
-      > .title {
-        background-color: var(--light-100);
-        border-bottom: solid 1px var(--light-200) !important;
-        color: var(--light-500) !important;
-      }
-    }
-  }
-  &.outlined {
-    &.light {
-      background-color: transparent;
-      border: solid 1px var(--light-500);
-      color: var(--light-500);
-
-      > .title {
-        background-color: var(--gray-100);
-        border-bottom: solid 1px var(--light-100) !important;
-      }
-    }
-  }
-}
-/* #endregion */
-/* LIGHT */

package/dist/assets/css/components/form/button/core/icon.css

@@ -1,37 +0,0 @@
-.ar-button:is(.no-content) {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0 !important;
-  min-width: 2rem;
-  max-width: 2rem;
-  min-height: 2rem;
-  max-height: 2rem;
-}
-.ar-button:is(.no-content) > .text {
-  gap: 0 !important;
-}
-.ar-button:is(.icon):not(.no-content) > .text {
-  gap: 0 0.5rem;
-}
-.ar-button:is(.icon-start):not(.no-content) > .text {
-  flex-direction: row;
-}
-.ar-button:is(.icon-end):not(.no-content) > .text {
-  flex-direction: row-reverse;
-}
-
-/* Custom Symbol */
-.ar-button:is(.icon) .dotted::after {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transform: translate(-50%, -50%);
-  content: "⋮";
-  width: 100%;
-  height: 100%;
-  font-size: 1.25rem;
-}

package/dist/assets/css/components/form/button/core/position.css

@@ -1,19 +0,0 @@
-.ar-button.fixed {
-  position: fixed;
-}
-.ar-button.absolute {
-  position: absolute;
-}
-
-.ar-button.top {
-  top: 0.5rem;
-}
-.ar-button.right {
-  right: 0.5rem;
-}
-.ar-button.bottom {
-  bottom: 0.5rem;
-}
-.ar-button.left {
-  left: 0.5rem;
-}

package/dist/assets/css/components/form/button/core/shape.css

@@ -1,13 +0,0 @@
-.ar-button.ar-button-shape {
-  align-items: center;
-  min-width: 2rem;
-  min-height: 2rem;
-  max-width: 2rem;
-  max-height: 2rem;
-  padding: 0 !important;
-}
-.ar-button.ar-button-shape.circle {
-  border-radius: var(--border-radius-pill);
-}
-.ar-button.ar-button-shape.square {
-}

package/dist/assets/css/components/form/button/core/size.css

@@ -1,14 +0,0 @@
-.ar-button.large {
-  height: 3rem;
-  padding: 0 1.25rem;
-  font-size: 1.25rem;
-}
-.ar-button.normal {
-  height: var(--input-height);
-  padding: 0 1rem;
-}
-.ar-button.small {
-  height: 1.5rem;
-  padding: 0 0.75rem;
-  font-size: 0.75rem;
-}

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

@@ -1,53 +0,0 @@
-@import url("./core/border.css");
-
-.ar-checkbox-wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: max-content;
-  height: var(--input-height);
-}
-.ar-checkbox-wrapper > label > :is(input[type="checkbox"]) {
-  display: none;
-}
-.ar-checkbox-wrapper > label > span {
-  display: flex;
-  align-items: center;
-  gap: 0 0.5rem;
-  user-select: none;
-}
-.ar-checkbox-wrapper > label > span > .ar-checkbox {
-  position: relative;
-  display: inline-block;
-  min-width: 1rem;
-  min-height: 1rem;
-}
-.ar-checkbox-wrapper > label > :is(input[type="checkbox"]):checked + span > .ar-checkbox {
-  z-index: 2;
-}
-.ar-checkbox-wrapper > label > :is(input[type="checkbox"]):checked + span > .ar-checkbox::before {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%) rotate(45deg);
-  display: inline-block;
-  content: "";
-  width: 0.25rem;
-  height: 0.5rem;
-  border: solid 1px transparent;
-  border-right-color: var(--white);
-  border-bottom-color: var(--white);
-}
-
-.ar-checkbox-wrapper > label > span > .trace {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  display: inline-block;
-  content: "";
-  width: 1rem;
-  height: 1rem;
-  border-radius: var(--border-radius-pill);
-  z-index: 1;
-}