ar-design 0.2.82 → 0.2.83

package/dist/assets/css/components/feedback/alert/alert.css

@@ -1,8 +1,9 @@
 .ar-alert {
-  padding: 1rem 1rem 1rem 1rem;
+  padding: 1rem;
   border-radius: var(--border-radius-sm);
   border: solid 1px transparent;
   font-family: var(--system);
+  font-weight: 400;
 }
 
 .ar-alert > p > .ar-alert-tag {
@@ -55,6 +56,3 @@
 .ar-alert ul li ul {
   margin-left: 0.1rem;
 }
-
-/* Core Css */
-@import url("./core/color.css");

package/dist/assets/css/core/animation.css

@@ -0,0 +1,164 @@
+/* #region Animation -> BLUE */
+@keyframes clicked-blue {
+  0% {
+    box-shadow: 0 0 0 0px var(--blue-500);
+  }
+  50% {
+    box-shadow: 0 0 0 5px var(--blue-100);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px transparent;
+  }
+}
+/* #endregion */
+/* Animation -> BLUE */
+
+/* #region Animation -> PURPLE */
+@keyframes clicked-purple {
+  0% {
+    box-shadow: 0 0 0 0px var(--purple-500);
+  }
+  50% {
+    box-shadow: 0 0 0 5px var(--purple-100);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px transparent;
+  }
+}
+/* #endregion */
+/* Animation -> PURPLE */
+
+/* #region Animation -> PINK */
+@keyframes clicked-pink {
+  0% {
+    box-shadow: 0 0 0 0px var(--pink-500);
+  }
+  50% {
+    box-shadow: 0 0 0 5px var(--pink-100);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px transparent;
+  }
+}
+/* #endregion */
+/* Animation -> PINK */
+
+/* #region Animation -> RED */
+@keyframes clicked-red {
+  0% {
+    box-shadow: 0 0 0 0px var(--red-500);
+  }
+  50% {
+    box-shadow: 0 0 0 5px var(--red-100);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px transparent;
+  }
+}
+/* #endregion */
+/* Animation -> RED */
+
+/* #region Animation -> ORANGE */
+@keyframes clicked-orange {
+  0% {
+    box-shadow: 0 0 0 0px var(--orange-500);
+  }
+  50% {
+    box-shadow: 0 0 0 5px var(--orange-100);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px transparent;
+  }
+}
+/* #endregion */
+/* Animation -> ORANGE */
+
+/* #region Animation -> YELLOW */
+@keyframes clicked-yellow {
+  0% {
+    box-shadow: 0 0 0 0px var(--yellow-500);
+  }
+  50% {
+    box-shadow: 0 0 0 5px var(--yellow-100);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px transparent;
+  }
+}
+/* #endregion */
+/* Animation -> YELLOW */
+
+/* #region Animation -> GREEN */
+@keyframes clicked-green {
+  0% {
+    box-shadow: 0 0 0 0px var(--green-500);
+  }
+  50% {
+    box-shadow: 0 0 0 5px var(--green-100);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px transparent;
+  }
+}
+/* #endregion */
+/* Animation -> GREEN */
+
+/* #region Animation -> TEAL */
+@keyframes clicked-teal {
+  0% {
+    box-shadow: 0 0 0 0px var(--teal-500);
+  }
+  50% {
+    box-shadow: 0 0 0 5px var(--teal-100);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px transparent;
+  }
+}
+/* #endregion */
+/* Animation -> TEAL */
+
+/* #region Animation -> CYAN */
+@keyframes clicked-cyan {
+  0% {
+    box-shadow: 0 0 0 0px var(--cyan-500);
+  }
+  50% {
+    box-shadow: 0 0 0 5px var(--cyan-100);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px transparent;
+  }
+}
+/* #endregion */
+/* Animation -> CYAN */
+
+/* #region Animation -> GRAY */
+@keyframes clicked-gray {
+  0% {
+    box-shadow: 0 0 0 0px var(--gray-500);
+  }
+  50% {
+    box-shadow: 0 0 0 5px var(--gray-100);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px transparent;
+  }
+}
+/* #endregion */
+/* Animation -> GRAY */
+
+/* #region Animation -> LIGHT */
+@keyframes clicked-light {
+  0% {
+    box-shadow: 0 0 0 0px var(--light-500);
+  }
+  50% {
+    box-shadow: 0 0 0 5px var(--light-100);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px transparent;
+  }
+}
+/* #endregion */
+/* Animation -> LIGHT */

package/dist/assets/css/core/ar-core.css

@@ -29,49 +29,24 @@
   --white-rgb: 255, 255, 255;
   --black: #000000;
   --black-rgb: 0, 0, 0;
-  --gray-100: #f8f9fa;
-  --gray-200: #e9ecef;
-  --gray-300: #dee2e6;
-  --gray-400: #ced4da;
-  --gray-500: #adb5bd;
-  --gray-600: #6c757d;
-  --gray-700: #495057;
-  --gray-800: #343a40;
-  --gray-900: #212529;
-  --gray-dark: #343a40;
-  --red: #ff0000;
-  --red-rgb: 255, 0, 0;
-  --green: #00ff00;
-  --green-rgb: 0, 255, 0;
-  --blue: #0000ff;
-  --blue-rgb: 0, 0, 255;
 
   /* ... */
-  --primary: #007bff;
-  --primary-active: #005abb;
+  --primary: var(--blue-500);
   --primary-light: #92c7ff;
-  --primary-rgb: 0, 123, 255;
-  --secondary: #6c757d;
-  --secondary-active: #495055;
+  --primary-rgb: 13, 110, 253;
+  --secondary: var(--gray-500);
   --secondary-rgb: 108, 117, 125;
-  --success: #28a745;
-  --success-active: #1c7a32;
+  --success: var(--green-500);
   --success-rgb: 40, 167, 69;
-  --warning: #ffc107;
-  --warning-active: #cf9c05;
+  --warning: var(--orange-500);
   --warning-rgb: 255, 193, 7;
-  --warning-font-color: #463500;
-  --danger: #dc3545;
-  --danger-active: #af2936;
+  --danger: var(--red-500);
   --danger-rgb: 220, 53, 69;
-  --information: #17a2b8;
-  --information-active: #107c8c;
+  --information: var(--cyan-500);
   --information-rgb: 23, 162, 184;
-  --light: #e4e6e9;
-  --light-active: #dde0e3;
+  --light: var(--light-500);
   --light-rgb: 222, 226, 230;
-  --dark: var(--gray-600);
-  --dark-active: var(--gray-700);
+  --dark: var(--gray-500);
   --dark-rgb: 52, 58, 64;
 }
 /* #endregion */
@@ -128,20 +103,20 @@
 /* Box Shadow */
 
 /* #region Variants */
-@import url("./variants/animation.css");
+@import url("./animation.css");
 
 .filled {
   border-color: transparent;
   transition: border 250ms, box-shadow 250ms ease-in-out;
 }
 
-@import url("./variants/filled/styles.css");
+@import url("./variants/filled.css");
 
 .surface {
   transition: border 250ms, box-shadow 250ms ease-in-out;
 }
 
-@import url("./variants/surface/styles.css");
+@import url("./variants/surface.css");
 
 .outlined {
   background-color: transparent;
@@ -151,7 +126,7 @@
   transition: border 250ms, box-shadow 250ms ease-in-out;
 }
 
-@import url("./variants/outlined/styles.css");
+@import url("./variants/outlined.css");
 
 .dashed {
   background-color: transparent;
@@ -161,7 +136,7 @@
   transition: border 250ms, box-shadow 250ms ease-in-out;
 }
 
-@import url("./variants/dashed/dashed.css");
+@import url("./variants/dashed.css");
 
 .borderless {
   background-color: transparent;
@@ -176,8 +151,9 @@
   cursor: no-drop !important;
 }
 
-@import url("./variants/borderless/borderless.css");
+@import url("./variants/borderless.css");
 @import url("./variants/border.css");
+@import url("./statuses.css");
 
 :is(input) {
   border: solid 1px transparent;
@@ -195,18 +171,8 @@ input[type="date"]::-webkit-calendar-picker-indicator {
 }
 :is(input, button):disabled,
 :is(input[type="checkbox"]):disabled + span > .ar-checkbox:is(.filled, .outlined) {
-  /* background-color: var(--gray-100) !important; */
-  /* border: solid 1px var(--gray-500) !important; */
-  /* color: var(--gray-500) !important; */
   cursor: no-drop !important;
 }
-/* :is(input, button):is(.outlined):disabled {
-  background-color: transparent !important;
-} */
-/* :is(input, button):is(.dashed):disabled {
-  background-color: transparent !important;
-  border: dashed 1px var(--gray-500) !important;
-} */
 :is(input[type="checkbox"]):disabled + span > .ar-checkbox:is(.borderless) {
   background-color: var(--gray-100) !important;
   color: var(--gray-500) !important;

package/dist/assets/css/core/statuses.css

@@ -0,0 +1,206 @@
+/* #region PRIMARY */
+.filled {
+  &.primary {
+    background-color: var(--blue-100);
+    color: var(--blue-700);
+  }
+}
+.surface {
+  &.primary {
+    background-color: var(--blue-100);
+    border: solid 1px var(--blue-300);
+    color: var(--blue-700);
+  }
+}
+.dashed {
+  &.primary {
+    border: dashed 1px var(--blue-300);
+    color: var(--blue-700);
+  }
+}
+/* #endregion */
+/* PRIMARY */
+
+/* #region PRIMARY-LIGHT */
+.filled {
+  &.primary-light {
+    background-color: var(--blue-100);
+    color: var(--blue-700);
+  }
+}
+.surface {
+  &.primary-light {
+    background-color: var(--blue-100);
+    border: solid 1px var(--blue-300);
+    color: var(--blue-700);
+  }
+}
+.dashed {
+  &.primary-light {
+    border: dashed 1px var(--blue-300);
+    color: var(--blue-700);
+  }
+}
+/* #endregion */
+/* PRIMARY-LIGHT */
+
+/* #region SECONDARY */
+.filled {
+  &.secondary {
+    background-color: var(--blue-100);
+    color: var(--blue-700);
+  }
+}
+.surface {
+  &.secondary {
+    background-color: var(--blue-100);
+    border: solid 1px var(--blue-300);
+    color: var(--blue-700);
+  }
+}
+.dashed {
+  &.secondary {
+    border: dashed 1px var(--blue-300);
+    color: var(--blue-700);
+  }
+}
+/* #endregion */
+/* SECONDARY */
+
+/* #region SUCCESS */
+.filled {
+  &.success {
+    background-color: var(--green-100);
+    color: var(--green-700);
+  }
+}
+.surface {
+  &.success {
+    background-color: var(--green-100);
+    border: solid 1px var(--green-300);
+    color: var(--green-700);
+  }
+}
+.dashed {
+  &.success {
+    border: dashed 1px var(--green-300);
+    color: var(--green-700);
+  }
+}
+/* #endregion */
+/* SUCCESS */
+
+/* #region WARNING */
+.filled {
+  &.warning {
+    background-color: var(--orange-100);
+    color: var(--orange-700);
+  }
+}
+.surface {
+  &.warning {
+    background-color: var(--orange-100);
+    border: solid 1px var(--orange-300);
+    color: var(--orange-700);
+  }
+}
+.dashed {
+  &.warning {
+    border: dashed 1px var(--orange-300);
+    color: var(--orange-700);
+  }
+}
+/* #endregion */
+/* WARNING */
+
+/* #region DANGER */
+.filled {
+  &.danger {
+    background-color: var(--red-100);
+    color: var(--red-700);
+  }
+}
+.surface {
+  &.danger {
+    background-color: var(--red-100);
+    border: solid 1px var(--red-300);
+    color: var(--red-700);
+  }
+}
+.dashed {
+  &.danger {
+    border: dashed 1px var(--red-300);
+    color: var(--red-700);
+  }
+}
+/* #endregion */
+/* DANGER */
+
+/* #region INFORMATION */
+.filled {
+  &.information {
+    background-color: var(--red-100);
+    color: var(--red-700);
+  }
+}
+.surface {
+  &.information {
+    background-color: var(--red-100);
+    border: solid 1px var(--red-300);
+    color: var(--red-700);
+  }
+}
+.dashed {
+  &.information {
+    border: dashed 1px var(--red-300);
+    color: var(--red-700);
+  }
+}
+/* #endregion */
+/* INFORMATION */
+
+/* #region DARK */
+.filled {
+  &.dark {
+    background-color: var(--red-100);
+    color: var(--red-700);
+  }
+}
+.surface {
+  &.dark {
+    background-color: var(--red-100);
+    border: solid 1px var(--red-300);
+    color: var(--red-700);
+  }
+}
+.dashed {
+  &.dark {
+    border: dashed 1px var(--red-300);
+    color: var(--red-700);
+  }
+}
+/* #endregion */
+/* DARK */
+
+/* #region LIGHT */
+.filled {
+  &.light {
+    background-color: var(--red-100);
+    color: var(--red-700);
+  }
+}
+.surface {
+  &.light {
+    background-color: var(--red-100);
+    border: solid 1px var(--red-300);
+    color: var(--red-700);
+  }
+}
+.dashed {
+  &.light {
+    border: dashed 1px var(--red-300);
+    color: var(--red-700);
+  }
+}
+/* #endregion */
+/* LIGHT */

package/dist/assets/css/core/variants/{surface/styles.css → surface.css}

@@ -2,7 +2,7 @@
 .surface:not(.disabled) {
   &.blue {
     background-color: var(--blue-100);
-    border:solid 1px var(--blue-300);
+    border: solid 1px var(--blue-300);
     color: var(--blue-600);
     
     &.active {
@@ -26,7 +26,7 @@ button.surface:not(.disabled) {
 .surface:not(.disabled) {
   &.purple {
     background-color: var(--purple-100);
-    border:solid 1px var(--purple-300);
+    border: solid 1px var(--purple-300);
     color: var(--purple-600);
     
     &.active {
@@ -50,7 +50,7 @@ button.surface:not(.disabled) {
 .surface:not(.disabled) {
   &.pink {
     background-color: var(--pink-100);
-    border:solid 1px var(--pink-300);
+    border: solid 1px var(--pink-300);
     color: var(--pink-600);
     
     &.active {
@@ -74,7 +74,7 @@ button.surface:not(.disabled) {
 .surface:not(.disabled) {
   &.red {
     background-color: var(--red-100);
-    border:solid 1px var(--red-300);
+    border: solid 1px var(--red-300);
     color: var(--red-600);
     
     &.active {
@@ -98,7 +98,7 @@ button.surface:not(.disabled) {
 .surface:not(.disabled) {
   &.orange {
     background-color: var(--orange-100);
-    border:solid 1px var(--orange-300);
+    border: solid 1px var(--orange-300);
     color: var(--orange-600);
     
     &.active {
@@ -122,7 +122,7 @@ button.surface:not(.disabled) {
 .surface:not(.disabled) {
   &.yellow {
     background-color: var(--yellow-100);
-    border:solid 1px var(--yellow-300);
+    border: solid 1px var(--yellow-300);
     color: var(--yellow-600);
     
     &.active {
@@ -146,7 +146,7 @@ button.surface:not(.disabled) {
 .surface:not(.disabled) {
   &.green {
     background-color: var(--green-100);
-    border:solid 1px var(--green-300);
+    border: solid 1px var(--green-300);
     color: var(--green-600);
     
     &.active {
@@ -170,7 +170,7 @@ button.surface:not(.disabled) {
 .surface:not(.disabled) {
   &.teal {
     background-color: var(--teal-100);
-    border:solid 1px var(--teal-300);
+    border: solid 1px var(--teal-300);
     color: var(--teal-600);
     
     &.active {
@@ -194,7 +194,7 @@ button.surface:not(.disabled) {
 .surface:not(.disabled) {
   &.cyan {
     background-color: var(--cyan-100);
-    border:solid 1px var(--cyan-300);
+    border: solid 1px var(--cyan-300);
     color: var(--cyan-600);
     
     &.active {
@@ -218,7 +218,7 @@ button.surface:not(.disabled) {
 .surface:not(.disabled) {
   &.gray {
     background-color: var(--gray-100);
-    border:solid 1px var(--gray-300);
+    border: solid 1px var(--gray-300);
     color: var(--gray-600);
     
     &.active {
@@ -242,7 +242,7 @@ button.surface:not(.disabled) {
 .surface:not(.disabled) {
   &.light {
     background-color: var(--light-100);
-    border:solid 1px var(--light-300);
+    border: solid 1px var(--light-300);
     color: var(--light-600);
     
     &.active {

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

@@ -1,6 +1,10 @@
-import { IBorder, IChildren, IStatus } from "../../../libs/types/IGlobalProps";
+import { IBorder, IChildren, IStatus, IVariant } from "../../../libs/types/IGlobalProps";
 type message = string | message[];
-interface IProps extends IChildren, IStatus, IBorder {
+interface IProps extends IChildren, IVariant<{
+    component: "alert";
+}>, IStatus<{
+    component: "alert";
+}>, IBorder {
     /**
      * Uyarı mesajı içeriğidir.
      *

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

@@ -1,15 +1,11 @@
 "use client";
 import React from "react";
 import "../../../assets/css/components/feedback/alert/alert.css";
-const Alert = ({ children, message, status = "primary", border = { radius: "sm" }, emphasize }) => {
-    // refs
-    let _className = "ar-alert";
-    // status
-    if (status)
-        _className += ` ${status}`;
-    // border
-    _className += ` border-style-solid`;
-    _className += ` border-radius-${border.radius}`;
+import Utils from "../../../libs/infrastructure/shared/Utils";
+const Alert = ({ children, message, variant = "filled", status = "primary", border = { radius: "sm" }, emphasize, }) => {
+    const _className = ["ar-alert"];
+    _className.push(...Utils.GetClassName(variant, status, undefined, border, undefined, undefined, undefined));
+    // methods
     const formattedTags = (message) => {
         // TODO: Şuan için sadece transparent olan alert tiplerinde çalışmakta.
         // TODO: Bu konu hakkında düşünüp karar verilecek.
@@ -51,6 +47,6 @@ const Alert = ({ children, message, status = "primary", border = { radius: "sm"
      * @returns
      */
     const cleanMessage = (message) => message.replace(/<\/?[^>]+>/g, "");
-    return (React.createElement("div", { className: _className }, message ? (Array.isArray(message) ? (createList(message)) : (React.createElement("p", { dangerouslySetInnerHTML: { __html: formattedTags(cleanMessage(message)) ?? "" } }))) : (children)));
+    return (React.createElement("div", { className: _className.map((c) => c).join(" ") }, message ? (Array.isArray(message) ? (createList(message)) : (React.createElement("p", { dangerouslySetInnerHTML: { __html: formattedTags(cleanMessage(message)) ?? "" } }))) : (children)));
 };
 export default Alert;

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

@@ -69,12 +69,12 @@ const Steps = function ({ children, steps = [], onChange, validation }) {
                 })));
             }),
             React.createElement("div", { className: "buttons" },
-                currentStep > 0 && (React.createElement(Button, { onClick: () => {
+                currentStep > 0 && (React.createElement(Button, { color: "blue", onClick: () => {
                         setCurrentStep((prev) => prev - 1);
                         onChange(currentStep - 1);
                     } }, "Geri")),
                 children && children,
-                currentStep < steps.length - 1 && (React.createElement(Button, { onClick: () => {
+                currentStep < steps.length - 1 && (React.createElement(Button, { color: "blue", onClick: () => {
                         if (validation) {
                             _onSubmit((result) => {
                                 if (!result)

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

@@ -23,7 +23,9 @@ export interface IChildren {
      */
     children?: React.ReactNode;
 }
-export interface IVariant {
+export interface IVariant<T extends {
+    component?: string;
+} = {}> {
     /**
      * Bileşenin stil varyantını belirtir.
      *
@@ -40,9 +42,11 @@ export interface IVariant {
      * <Component variant="filled">Hello, World!</Component>
      * ```
      */
-    variant?: Variants;
+    variant?: T["component"] extends "alert" ? Exclude<Variants, "outlined" | "borderless"> : Variants;
 }
-export interface IStatus {
+export interface IStatus<T extends {
+    component?: string;
+} = {}> {
     /**
      * Bileşenin statü durumuna göre renk özelliğini belirtir.
      *
@@ -52,7 +56,7 @@ export interface IStatus {
      * <Component status="success">Hello, World!</Component>
      * ```
      */
-    status?: Status;
+    status?: T["component"] extends "alert" ? Exclude<Status, "primary-light" | "secondary" | "information" | "dark" | "light"> : Status;
 }
 export interface IColors {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ar-design",
-  "version": "0.2.82",
+  "version": "0.2.83",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/dist/assets/css/components/feedback/alert/core/border.css

@@ -1,24 +0,0 @@
-.ar-alert.primary-border {
-  border-color: rgba(var(--primary-rgb), 0.5);
-}
-.ar-alert.secondary-border {
-  border-color: rgba(var(--secondary-rgb), 0.5);
-}
-.ar-alert.success-border {
-  border-color: rgba(var(--success-rgb), 0.5);
-}
-.ar-alert.warning-border {
-  border-color: rgba(var(--warning-rgb), 0.5);
-}
-.ar-alert.danger-border {
-  border-color: rgba(var(--danger-rgb), 0.5);
-}
-.ar-alert.information-border {
-  border-color: rgba(var(--information-rgb), 0.5);
-}
-.ar-alert.light-border {
-  border-color: rgba(var(--light-rgb), 0.5);
-}
-.ar-alert.dark-border {
-  border-color: rgba(var(--dark-rgb), 0.5);
-}

package/dist/assets/css/components/feedback/alert/core/color.css

@@ -1,32 +0,0 @@
-.ar-alert.primary {
-  background-color: rgba(var(--primary-rgb), 0.1);
-  border-color: rgba(var(--primary-rgb), 0.5);
-}
-.ar-alert.secondary {
-  background-color: rgba(var(--secondary-rgb), 0.1);
-  border-color: rgba(var(--secondary-rgb), 0.5);
-}
-.ar-alert.success {
-  background-color: rgba(var(--success-rgb), 0.1);
-  border-color: rgba(var(--success-rgb), 0.5);
-}
-.ar-alert.warning {
-  background-color: rgba(var(--warning-rgb), 0.1);
-  border-color: rgba(var(--warning-rgb), 0.5);
-}
-.ar-alert.danger {
-  background-color: rgba(var(--danger-rgb), 0.1);
-  border-color: rgba(var(--danger-rgb), 0.5);
-}
-.ar-alert.information {
-  background-color: rgba(var(--information-rgb), 0.1);
-  border-color: rgba(var(--information-rgb), 0.5);
-}
-.ar-alert.light {
-  background-color: rgba(var(--light-rgb), 0.1);
-  border-color: rgba(var(--light-rgb), 0.5);
-}
-.ar-alert.dark {
-  background-color: rgba(var(--dark-rgb), 0.1);
-  border-color: rgba(var(--dark-rgb), 0.5);
-}