ar-design 0.2.7 → 0.2.9

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

@@ -14,6 +14,22 @@
 /* #endregion */
 /* Border Color -> PRIMARY */
 
+/* #region Border Color -> PRIMARY-LIGHT */
+.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.filled.primary-light::before {
+  border-right-color: var(--white);
+  border-bottom-color: var(--white);
+}
+.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.outlined.primary-light::before {
+  border-right-color: var(--primary-light);
+  border-bottom-color: var(--primary-light);
+}
+.ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.borderless.primary-light::before {
+  border-right-color: var(--primary-light);
+  border-bottom-color: var(--primary-light);
+}
+/* #endregion */
+/* Border Color -> PRIMARY-LIGHT */
+
 /* #region Border Color -> SECONDARY */
 .ar-checkbox-wrapper > label > :is(input[type="checkbox"], input[type="radio"]):checked + span > .ar-checkbox.filled.secondary::before {
   border-right-color: var(--white);

package/dist/assets/css/components/form/switch/core/border.css

@@ -8,6 +8,16 @@
 /* #endregion */
 /* Border Color -> PRIMARY */
 
+/* #region Border Color -> PRIMARY-LIGHT */
+.ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.primary-light {
+  box-shadow: 0 0 0 2.5px rgba(var(--primary-light-rgb), .1);
+}
+.ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.primary-light > .handle {
+  box-shadow: 0 0 0 2px rgba(var(--primary-light-rgb), .5);
+}
+/* #endregion */
+/* Border Color -> PRIMARY-LIGHT */
+
 /* #region Border Color -> SECONDARY */
 .ar-switch-wrapper > label > :is(input[type="checkbox"]):checked + .ar-switch.secondary {
   box-shadow: 0 0 0 2.5px rgba(var(--secondary-rgb), .1);

package/dist/assets/css/components/form/text-editor/styles.css

@@ -1,4 +1,7 @@
 .ar-text-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
   width: 100%;
 }
 .ar-text-editor > .toolbar {
@@ -8,9 +11,44 @@
 }
 .ar-text-editor > iframe {
   width: 100%;
+  border-bottom: none;
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+.ar-text-editor > .resize {
+  position: relative;
+  background-color: var(--gray-200);
+  width: 100%;
+  height: 1.5rem;
+  border: solid 1px transparent;
+  border-top-color: var(--gray-400);
+  border-left-color: var(--gray-300);
+  border-right-color: var(--gray-300);
+  border-bottom-color: var(--gray-300);
+  border-bottom-left-radius: var(--border-radius-sm);
+  border-bottom-right-radius: var(--border-radius-sm);
+  cursor: ns-resize;
 }
+.ar-text-editor > .resize::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: var(--gray-500);
+  width: 2rem;
+  height: 0.1rem;
+  box-shadow: 0px -5px 0 0px var(--gray-500), 0px 5px 0 0px var(--gray-500);
+}
+
 .ar-text-editor > .validation {
   color: var(--danger);
   font-size: 0.8rem;
   font-weight: 600;
 }
+
+.ar-text-editor--block-item {
+  position: absolute;
+  inset: 0;
+  cursor: ns-resize;
+}

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

@@ -49,6 +49,7 @@
   /* ... */
   --primary: #007bff;
   --primary-active: #005abb;
+  --primary-light: #92c7ff;
   --primary-rgb: 0, 123, 255;
   --secondary: #6c757d;
   --secondary-active: #495055;

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

@@ -13,6 +13,21 @@
 /* #endregion */
 /* Animation -> PRIMARY */
 
+/* #region Animation -> PRIMARY-LIGHT */
+@keyframes clicked-primary-light {
+  0% {
+    box-shadow: 0 0 0 0px rgba(var(--primary-light-rgb), 0);
+  }
+  25% {
+    box-shadow: 0 0 0 5px rgba(var(--primary-light-rgb), 0.25);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px rgba(var(--primary-light-rgb), 0);
+  }
+}
+/* #endregion */
+/* Animation -> PRIMARY-LIGHT */
+
 /* #region Animation -> SECONDARY */
 @keyframes clicked-secondary {
   0% {

package/dist/assets/css/core/variants/borderless/borderless.css

@@ -17,6 +17,25 @@ input.borderless:not(.disabled).primary:focus {
 /* #endregion */
 /* PRIMARY */
 
+/* #region PRIMARY-LIGHT */
+.borderless:not(.disabled).primary-light {
+  color: var(--primary-light);
+}
+.borderless:not(.disabled).primary-light:hover {
+  background-color: rgba(var(--primary-light-rgb), 0.1);
+}
+input.borderless:not(.disabled).primary-light:focus {
+  border-color: var(--primary-light);
+  box-shadow: 0 0 0 3.5px rgba(var(--primary-light-rgb), 0.1);
+}
+.borderless:not(.disabled).primary-light.active {
+  background-color: transparent;
+  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
+  animation: clicked-primary-light ease-in-out 750ms 0s 1 normal both;
+}
+/* #endregion */
+/* PRIMARY-LIGHT */
+
 /* #region SECONDARY */
 .borderless:not(.disabled).secondary {
   color: var(--secondary);

package/dist/assets/css/core/variants/dashed/dashed.css

@@ -20,6 +20,28 @@ input[type="checkbox"]:checked + span > .ar-checkbox.dashed:not(.disabled).prima
 /* #endregion */
 /* PRIMARY */
 
+/* #region PRIMARY-LIGHT */
+.dashed:not(.disabled).primary-light {
+  border-color: var(--primary-light);
+  color: var(--primary-light);
+}
+.dashed:not(.disabled).primary-light:hover {
+  border-color: rgba(var(--primary-light-rgb), 0.5);
+}
+input.dashed:not(.disabled).primary-light:focus{
+  border-color: var(--primary-light);
+  box-shadow: 0 0 0 3.5px rgba(var(--primary-light-rgb), 0.25);
+}
+input[type="checkbox"]:checked + span > .ar-checkbox.dashed:not(.disabled).primary-light{
+  box-shadow: 0 0 0 2.5px rgba(var(--primary-light-rgb), 0.1);
+}
+.dashed:not(.disabled).primary-light.active {
+  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
+  animation: clicked-primary-light ease-in-out 750ms 0s 1 normal both;
+}
+/* #endregion */
+/* PRIMARY-LIGHT */
+
 /* #region SECONDARY */
 .dashed:not(.disabled).secondary {
   border-color: var(--secondary);

package/dist/assets/css/core/variants/filled/filled.css

@@ -27,6 +27,35 @@ button.filled:not(.disabled).primary:focus {
 /* #endregion */
 /* PRIMARY */
 
+/* #region PRIMARY-LIGHT */
+.filled:not(.disabled).primary-light {
+  background-color: var(--primary-light);
+  color: var(--white)
+}
+input.filled:not(.disabled).primary-light:hover {
+  background-color: var(--primary-light-active);
+}
+input.filled:not(.disabled).primary-light:focus {
+  background-color: transparent;
+  border-color: var(--primary-light);
+  box-shadow: 0 0 0 3.5px rgba(var(--primary-light-rgb), 0.25);
+}
+input[type="checkbox"]:checked + span > .ar-checkbox.filled:not(.disabled).primary-light{
+  box-shadow: 0 0 0 2.5px rgba(var(--primary-light-rgb), 0.25);
+}
+button.filled:not(.disabled).primary-light {
+  color: var(--white);
+}
+button.filled:not(.disabled).primary-light:focus {
+  background-color: var(--primary-light);
+}
+.filled:not(.disabled).primary-light.active {
+  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
+  animation: clicked-primary-light ease-in-out 750ms 0s 1 normal both;
+}
+/* #endregion */
+/* PRIMARY-LIGHT */
+
 /* #region SECONDARY */
 .filled:not(.disabled).secondary {
   background-color: var(--secondary);

package/dist/assets/css/core/variants/outlined/outlined.css

@@ -21,6 +21,29 @@ input[type="checkbox"]:checked + span > .ar-checkbox.outlined:not(.disabled).pri
 /* #endregion */
 /* PRIMARY */
 
+/* #region PRIMARY-LIGHT */
+.outlined:not(.disabled).primary-light {
+  border-color: var(--primary-light);
+  /* color: var(--primary-light); */
+}
+.outlined:not(.disabled).primary-light:hover {
+  border-color: rgba(var(--primary-light-rgb), 0.5);
+}
+input.outlined:not(.disabled).primary-light:focus,
+iframe.outlined:not(.disabled).primary-light.focused{
+  border-color: var(--primary-light);
+  box-shadow: 0 0 0 3.5px rgba(var(--primary-light-rgb), 0.25);
+}
+input[type="checkbox"]:checked + span > .ar-checkbox.outlined:not(.disabled).primary-light{
+  box-shadow: 0 0 0 2.5px rgba(var(--primary-light-rgb), 0.1);
+}
+.outlined:not(.disabled).primary-light.active {
+  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
+  animation: clicked-primary-light ease-in-out 750ms 0s 1 normal both;
+}
+/* #endregion */
+/* PRIMARY-LIGHT */
+
 /* #region SECONDARY */
 .outlined:not(.disabled).secondary {
   border-color: var(--secondary);

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

@@ -6,7 +6,7 @@ const Radio = forwardRef(({ label, size = "normal", status, border = { radius: "
     // refs
     const _checkbox = useRef(null);
     const _checkboxClassName = ["ar-radio"];
-    _checkboxClassName.push(...Utils.GetClassName("filled", undefined, border, size, undefined, attributes.className));
+    _checkboxClassName.push(...Utils.GetClassName("filled", status, border, size, undefined, attributes.className));
     return (React.createElement("div", { className: "ar-radio-wrapper" },
         React.createElement("label", null,
             React.createElement("input", { ref: ref, type: "radio", ...attributes, size: 0, onChange: (event) => {

package/dist/components/form/text-editor/index.js

@@ -1,12 +1,13 @@
 "use client";
+import Utils from "../../../libs/infrastructure/shared/Utils";
 import React, { useEffect, useRef, useState } from "react";
-import { ARIcon } from "../../icons";
 import Button from "../button";
+import { ARIcon } from "../../icons";
 import "../../../assets/css/components/form/text-editor/styles.css";
-import Utils from "../../../libs/infrastructure/shared/Utils";
 const TextEditor = ({ name, value, onChange, placeholder, validation }) => {
     // refs
     const _firstLoad = useRef(false);
+    const _container = useRef(null);
     const _arIframe = useRef(null);
     // states
     const [iframe, setIframe] = useState(null);
@@ -34,6 +35,25 @@ const TextEditor = ({ name, value, onChange, placeholder, validation }) => {
     };
     const handleFocus = () => _arIframe.current?.classList.add("focused");
     const handleBlur = () => _arIframe.current?.classList.remove("focused");
+    const handleMouseDown = () => {
+        // Resizebar a tıklandığında iframe içerisinde bulunan window'un event listenerı olmadığı için orada resize çalışmayacaktır.
+        // Bu yüzden önüne bir duvar örüyoruz ve mevcut sayfanın window'unda işlem yapmaya devam ediyor.
+        const resizeItem = document.createElement("div");
+        resizeItem.classList.add("ar-text-editor--block-item");
+        _container.current?.appendChild(resizeItem);
+        window.addEventListener("mousemove", handleResize);
+        window.addEventListener("mouseup", () => {
+            resizeItem.remove();
+            window.removeEventListener("mousemove", handleResize);
+        });
+    };
+    const handleResize = (event) => {
+        if (_arIframe.current) {
+            const rect = _arIframe.current.getBoundingClientRect();
+            const height = (rect.height += event.movementY);
+            _arIframe.current.style.height = `${height}px`;
+        }
+    };
     // useEffects
     // Iframe Document yüklendikten sonra çalışacaktır. (Bir defa çalışır.)
     useEffect(() => {
@@ -76,11 +96,12 @@ const TextEditor = ({ name, value, onChange, placeholder, validation }) => {
             }
         };
     }, []);
-    return (React.createElement("div", { className: "ar-text-editor" },
+    return (React.createElement("div", { ref: _container, className: "ar-text-editor" },
         React.createElement("div", { className: "toolbar" }, toolbarButtons.map(({ command, icon, tooltip }) => (React.createElement(Button, { key: command, variant: "borderless", status: "secondary", icon: { element: React.createElement(ARIcon, { icon: icon, size: 18, fill: "var(--gray-700)" }) }, tooltip: {
                 text: tooltip,
             }, onClick: () => execCommand(command) })))),
         React.createElement("iframe", { ref: _arIframe, name: name, className: _iframeClassName.map((c) => c).join(" ") }),
+        React.createElement("div", { className: "resize", onMouseDown: handleMouseDown }),
         validation?.text && React.createElement("span", { className: "validation" }, validation.text)));
 };
 export default TextEditor;

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

@@ -1,6 +1,6 @@
 import React from "react";
 export type Variants = "filled" | "outlined" | "dashed" | "borderless";
-export type Status = "primary" | "secondary" | "success" | "danger" | "warning" | "information" | "dark" | "light";
+export type Status = "primary" | "primary-light" | "secondary" | "success" | "danger" | "warning" | "information" | "dark" | "light";
 export type ParagraphColors = "gray-100" | "gray-200" | "gray-300" | "gray-400" | "gray-500" | "gray-600" | "gray-700" | "gray-800" | "gray-900";
 export type Border = {
     radius: BorderRadiuses;

package/package.json

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