ar-design 0.1.2 → 0.1.4

package/dist/assest/css/css/button/variant/text/core.css

@@ -0,0 +1,97 @@
+.ar-button.text {
+  background-color: transparent;
+  border-width: 1px;
+  border-color: transparent;
+}
+
+.ar-button.text.disabled {
+  border-color: var(--gray-500);
+  color: var(--gray-500);
+}
+
+.ar-button.text:not(.disabled).primary {
+  border-color: var(--primary);
+  color: var(--primary);
+}
+.ar-button.text:not(.disabled).primary:hover {
+  background-color: rgba(var(--primary-rgb), 0.1);
+}
+.ar-button.text:not(.disabled).primary:active {
+  background-color: rgba(var(--primary-rgb), 0.2);
+}
+
+.ar-button.text:not(.disabled).secondary {
+  border-color: var(--secondary);
+  color: var(--secondary);
+}
+.ar-button.text:not(.disabled).secondary:hover {
+  background-color: rgba(var(--secondary-rgb), 0.1);
+}
+.ar-button.text:not(.disabled).secondary:active {
+  background-color: rgba(var(--secondary-rgb), 0.2);
+}
+
+.ar-button.text:not(.disabled).success {
+  border-color: var(--success);
+  color: var(--success);
+}
+.ar-button.text:not(.disabled).success:hover {
+  background-color: rgba(var(--success-rgb), 0.1);
+}
+.ar-button.text:not(.disabled).success:active {
+  background-color: rgba(var(--success-rgb), 0.2);
+}
+
+.ar-button.text:not(.disabled).warning {
+  border-color: var(--warning);
+  color: var(--warning);
+}
+.ar-button.text:not(.disabled).warning:hover {
+  background-color: rgba(var(--warning-rgb), 0.1);
+}
+.ar-button.text:not(.disabled).warning:active {
+  background-color: rgba(var(--warning-rgb), 0.2);
+}
+
+.ar-button.text:not(.disabled).danger {
+  border-color: var(--danger);
+  color: var(--danger);
+}
+.ar-button.text:not(.disabled).danger:hover {
+  background-color: rgba(var(--danger-rgb), 0.1);
+}
+.ar-button.text:not(.disabled).danger:active {
+  background-color: rgba(var(--danger-rgb), 0.2);
+}
+
+.ar-button.text:not(.disabled).information {
+  border-color: var(--information);
+  color: var(--information);
+}
+.ar-button.text:not(.disabled).information:hover {
+  background-color: rgba(var(--information-rgb), 0.1);
+}
+.ar-button.text:not(.disabled).information:active {
+  background-color: rgba(var(--information-rgb), 0.2);
+}
+
+.ar-button.text:not(.disabled).light {
+  border-color: var(--light);
+  color: var(--gray-500);
+}
+.ar-button.text:not(.disabled).light:hover {
+  background-color: rgba(var(--light-rgb), 0.1);
+}
+.ar-button.text:not(.disabled).light:active {
+  background-color: rgba(var(--light-rgb), 0.2);
+}
+.ar-button.text:not(.disabled).dark {
+  border-color: var(--dark);
+  color: var(--dark);
+}
+.ar-button.text:not(.disabled).dark:hover {
+  background-color: rgba(var(--dark-rgb), 0.1);
+}
+.ar-button.text:not(.disabled).dark:active {
+  background-color: rgba(var(--dark-rgb), 0.2);
+}

package/dist/assest/css/css/divider/divider.css

@@ -1 +1,5 @@
-@import url("./core/core.css");
+.ar-divider {
+  width: 100%;
+  border: none;
+  margin: 1rem 0;
+}

package/dist/assest/css/css/layout/header.css

@@ -0,0 +1,18 @@
+.ar-header {
+  position: sticky;
+  top: 0;
+  background-color: rgba(var(--white-rgb), 0.5);
+  backdrop-filter: blur(5px);
+  height: 3.75rem;
+  border-bottom: solid 1px var(--gray-200);
+  z-index: 10;
+}
+.ar-header > .ar-header-with-wrap {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 1280px;
+  height: 100%;
+  margin: 0 auto;
+}

package/dist/assest/css/css/layout/layout.css

@@ -0,0 +1,27 @@
+.ar-layout {
+  display: flex;
+  flex-direction: column;
+}
+.ar-layout > main {
+  display: flex;
+  flex-direction: row;
+  gap: 0 2rem;
+  width: 1280px;
+  margin: 0 auto;
+}
+.ar-layout > main > aside {
+  position: sticky;
+  top: 3.75rem;
+  width: 25%;
+  height: 100%;
+  margin: 2rem 0;
+}
+.ar-layout > main > section {
+  background-color: var(--white);
+  width: 100%;
+  margin: 2rem 0;
+  padding: 2rem;
+  border-radius: var(--border-radius-lg);
+}
+
+@import url("./header.css");

package/dist/assest/css/css/menu/core/open-or-close.css

@@ -5,8 +5,13 @@
   transition: max-height 250ms ease-in-out, opacity 250ms cubic-bezier(1, 0, 0, 1);
 }
 .ar-menu .ar-menu-list-item-groups.opened {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem 0;
   opacity: 1;
   max-height: 100rem;
+  padding-top: 0.2rem;
+  padding-bottom: 0.2rem;
 }
 .ar-menu .ar-menu-list-item-group-item-title {
   display: flex;

package/dist/assest/css/css/menu/core/selected.css

@@ -11,8 +11,7 @@
   border-bottom-left-radius: var(--border-radius-lg);
 }
 .ar-menu .ar-menu-list-item-group-item-title.selected {
-  background-color: rgba(var(--red-rgb), 0.1) !important;
-  border-top-left-radius: var(--border-radius-lg);
-  border-bottom-left-radius: var(--border-radius-lg);
-  color: var(--red);
+  background-color: var(--gray-200) !important;
+  border-radius: var(--border-radius-lg);
+  box-shadow: 0 0 0 1px var(--gray-200);
 }

package/dist/assest/css/css/menu/menu.css

@@ -1,2 +1,58 @@
-@import url("./core/core.css");
+.ar-menu {
+  padding: 0 0.25rem;
+  font-family: var(--system-fonts);
+}
+.ar-menu ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.ar-menu ul li:last-child {
+  padding-bottom: 0;
+}
+.ar-menu ul li ul {
+  margin-left: 0.5rem;
+  padding-left: 0.5rem;
+}
+.ar-menu > .ar-menu-list {
+  display: flex;
+}
+.ar-menu .ar-menu-list-item-group-item-title {
+  display: flex;
+  align-items: center;
+  height: 2.5rem;
+  user-select: none;
+}
+.ar-menu .ar-menu-list-item-group-item-title a {
+  color: var(--black);
+}
+.ar-menu .ar-menu-list-item-group-item-title:not(.group) > * {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  padding: 0 1rem;
+}
+.ar-menu .ar-menu-list-item-group-item-title:not(.group):hover {
+  background-color: var(--gray-200);
+  border-radius: var(--border-radius-lg);
+}
+.ar-menu .ar-menu-list-item-group-item-title.selection-item {
+  background-color: red;
+}
+.ar-menu .ar-menu-list-item-group-item-title.group {
+  display: flex;
+  /* margin-left: 1rem; */
+  padding-left: 0;
+  border-radius: 0;
+  border-bottom: solid 1px var(--gray-100);
+  color: var(--gray-500);
+  font-size: 0.85rem;
+}
+
+/* Core Css */
+@import url("./core/selected.css");
+@import url("./core/open-or-close.css");
+
+/* Variant Css */
 @import url("./variant/vertical.css");

package/dist/assest/css/css/syntax-highlighter/syntax-highlighter.css

@@ -1,2 +1,58 @@
-@import url("./core/core.css");
+.ar-syntax {
+  display: flex;
+  flex-direction: column;
+  border: solid 1px var(--gray-200);
+  border-radius: var(--border-radius-lg);
+  overflow: hidden;
+}
+.ar-syntax > .preview {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1rem;
+  background-color: var(--white);
+  padding: 1rem;
+  min-height: 7.5rem;
+}
+
+.ar-syntax > .preview.left {
+  justify-content: left;
+}
+.ar-syntax > .preview.center {
+  justify-content: center;
+}
+.ar-syntax > .preview.right {
+  justify-content: right;
+}
+
+.ar-syntax > .ar-syntax-button-group {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0.5rem 0;
+  border: dashed 1px transparent;
+  border-top-color: var(--gray-300);
+}
+
+.ar-syntax > .pre {
+  background-color: var(--gray-900);
+  margin: 0;
+  padding: 1rem;
+  overflow-x: auto;
+}
+.ar-syntax > .pre.hidden {
+  display: none;
+}
+.ar-syntax > .pre.visible {
+  display: block;
+}
+.ar-syntax > .pre > code {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem 0;
+  font-family: var(--jetBrainsMonoRegular) !important;
+}
+
 @import url("./core/jsx.template.css");

package/dist/assest/css/css/typography/paragraph/core.css

@@ -1,4 +1,5 @@
 .ar-typography-paragraph {
   margin-bottom: 1rem;
   color: var(--gray-900);
+  font-family: var(--system-fonts);
 }

package/dist/assest/css/css/typography/title/core.css

@@ -1,4 +1,5 @@
 .ar-typography-title {
   margin-bottom: 1rem;
   color: var(--gray-900);
+  font-family: var(--system-fonts);
 }

package/dist/assest/css/divider/divider.css

@@ -1 +1,5 @@
-@import url("./core/core.css");
+.ar-divider {
+  width: 100%;
+  border: none;
+  margin: 1rem 0;
+}

package/dist/assest/css/layout/header.css

@@ -0,0 +1,18 @@
+.ar-header {
+  position: sticky;
+  top: 0;
+  background-color: rgba(var(--white-rgb), 0.5);
+  backdrop-filter: blur(5px);
+  height: 3.75rem;
+  border-bottom: solid 1px var(--gray-200);
+  z-index: 10;
+}
+.ar-header > .ar-header-with-wrap {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 1280px;
+  height: 100%;
+  margin: 0 auto;
+}

package/dist/assest/css/layout/layout.css

@@ -0,0 +1,27 @@
+.ar-layout {
+  display: flex;
+  flex-direction: column;
+}
+.ar-layout > main {
+  display: flex;
+  flex-direction: row;
+  gap: 0 2rem;
+  width: 1280px;
+  margin: 0 auto;
+}
+.ar-layout > main > aside {
+  position: sticky;
+  top: 3.75rem;
+  width: 25%;
+  height: 100%;
+  margin: 2rem 0;
+}
+.ar-layout > main > section {
+  background-color: var(--white);
+  width: 100%;
+  margin: 2rem 0;
+  padding: 2rem;
+  border-radius: var(--border-radius-lg);
+}
+
+@import url("./header.css");

package/dist/assest/css/menu/core/open-or-close.css

@@ -5,8 +5,13 @@
   transition: max-height 250ms ease-in-out, opacity 250ms cubic-bezier(1, 0, 0, 1);
 }
 .ar-menu .ar-menu-list-item-groups.opened {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem 0;
   opacity: 1;
   max-height: 100rem;
+  padding-top: 0.2rem;
+  padding-bottom: 0.2rem;
 }
 .ar-menu .ar-menu-list-item-group-item-title {
   display: flex;

package/dist/assest/css/menu/core/selected.css

@@ -11,8 +11,7 @@
   border-bottom-left-radius: var(--border-radius-lg);
 }
 .ar-menu .ar-menu-list-item-group-item-title.selected {
-  background-color: rgba(var(--red-rgb), 0.1) !important;
-  border-top-left-radius: var(--border-radius-lg);
-  border-bottom-left-radius: var(--border-radius-lg);
-  color: var(--red);
+  background-color: var(--gray-200) !important;
+  border-radius: var(--border-radius-lg);
+  box-shadow: 0 0 0 1px var(--gray-200);
 }

package/dist/assest/css/menu/menu.css

@@ -1,2 +1,58 @@
-@import url("./core/core.css");
+.ar-menu {
+  padding: 0 0.25rem;
+  font-family: var(--system-fonts);
+}
+.ar-menu ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.ar-menu ul li:last-child {
+  padding-bottom: 0;
+}
+.ar-menu ul li ul {
+  margin-left: 0.5rem;
+  padding-left: 0.5rem;
+}
+.ar-menu > .ar-menu-list {
+  display: flex;
+}
+.ar-menu .ar-menu-list-item-group-item-title {
+  display: flex;
+  align-items: center;
+  height: 2.5rem;
+  user-select: none;
+}
+.ar-menu .ar-menu-list-item-group-item-title a {
+  color: var(--black);
+}
+.ar-menu .ar-menu-list-item-group-item-title:not(.group) > * {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  padding: 0 1rem;
+}
+.ar-menu .ar-menu-list-item-group-item-title:not(.group):hover {
+  background-color: var(--gray-200);
+  border-radius: var(--border-radius-lg);
+}
+.ar-menu .ar-menu-list-item-group-item-title.selection-item {
+  background-color: red;
+}
+.ar-menu .ar-menu-list-item-group-item-title.group {
+  display: flex;
+  /* margin-left: 1rem; */
+  padding-left: 0;
+  border-radius: 0;
+  border-bottom: solid 1px var(--gray-100);
+  color: var(--gray-500);
+  font-size: 0.85rem;
+}
+
+/* Core Css */
+@import url("./core/selected.css");
+@import url("./core/open-or-close.css");
+
+/* Variant Css */
 @import url("./variant/vertical.css");

package/dist/assest/css/syntax-highlighter/syntax-highlighter.css

@@ -1,2 +1,58 @@
-@import url("./core/core.css");
+.ar-syntax {
+  display: flex;
+  flex-direction: column;
+  border: solid 1px var(--gray-200);
+  border-radius: var(--border-radius-lg);
+  overflow: hidden;
+}
+.ar-syntax > .preview {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1rem;
+  background-color: var(--white);
+  padding: 1rem;
+  min-height: 7.5rem;
+}
+
+.ar-syntax > .preview.left {
+  justify-content: left;
+}
+.ar-syntax > .preview.center {
+  justify-content: center;
+}
+.ar-syntax > .preview.right {
+  justify-content: right;
+}
+
+.ar-syntax > .ar-syntax-button-group {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0.5rem 0;
+  border: dashed 1px transparent;
+  border-top-color: var(--gray-300);
+}
+
+.ar-syntax > .pre {
+  background-color: var(--gray-900);
+  margin: 0;
+  padding: 1rem;
+  overflow-x: auto;
+}
+.ar-syntax > .pre.hidden {
+  display: none;
+}
+.ar-syntax > .pre.visible {
+  display: block;
+}
+.ar-syntax > .pre > code {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem 0;
+  font-family: var(--jetBrainsMonoRegular) !important;
+}
+
 @import url("./core/jsx.template.css");

package/dist/assest/css/typography/paragraph/core.css

@@ -1,4 +1,5 @@
 .ar-typography-paragraph {
   margin-bottom: 1rem;
   color: var(--gray-900);
+  font-family: var(--system-fonts);
 }

package/dist/assest/css/typography/title/core.css

@@ -1,4 +1,5 @@
 .ar-typography-title {
   margin-bottom: 1rem;
   color: var(--gray-900);
+  font-family: var(--system-fonts);
 }

package/dist/components/alert/Types.d.ts

@@ -0,0 +1,9 @@
+import { Colors } from "../../libs/types/Colors";
+type message = string | message[];
+export type Props = {
+    message: message;
+    type: Colors | "transparent";
+    border?: boolean;
+    emphasize?: string[];
+};
+export {};

package/dist/components/alert/Types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/alert/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { Props } from "./Types";
+import "../../assest/css/alert/alert.css";
+declare const Alert: React.FC<Props>;
+export default Alert;

package/dist/components/alert/index.js

@@ -0,0 +1,60 @@
+"use client";
+import React, { useRef } from "react";
+import "../../assest/css/alert/alert.css";
+const Alert = ({ message, type, border = true, emphasize }) => {
+    // refs
+    let _className = useRef("ar-alert").current;
+    // methods
+    const className = () => {
+        if (type)
+            _className += ` ${type}`;
+        if (border)
+            _className += ` ${type}-border`;
+        return _className;
+    };
+    const formattedTags = (message) => {
+        // TODO: Şuan için sadece transparent olan alert tiplerinde çalışmakta.
+        // TODO: Bu konu hakkında düşünüp karar verilecek.
+        if (!emphasize || type !== "transparent")
+            return message;
+        let _lowerCaseMessage = message.toLowerCase();
+        return emphasize.reduce((currentMessage, emphasize) => {
+            // TODO: ...
+            // if (['""', " "].includes(emphasize)) return currentMessage;
+            let _lowerCaseEmphasize = emphasize.toLowerCase();
+            let startIndex = _lowerCaseMessage.indexOf(_lowerCaseEmphasize);
+            while (startIndex !== -1) {
+                const endIndex = startIndex + emphasize.length;
+                const firstValue = currentMessage.substring(0, startIndex);
+                const originalTag = currentMessage.substring(startIndex, endIndex);
+                const lastValue = currentMessage.substring(endIndex);
+                currentMessage = `${firstValue} <span class="ar-alert-tag">${originalTag}</span> ${lastValue}`;
+                // Update the lowerCaseMessage to reflect the change
+                _lowerCaseMessage = currentMessage.toLowerCase();
+                // Find the next occurrence of the tag
+                startIndex = _lowerCaseMessage.indexOf(_lowerCaseEmphasize, startIndex + `<span class="ar-alert-tag">${originalTag}</span>`.length);
+            }
+            return currentMessage;
+        }, message);
+    };
+    const createList = (message, isSubMessage) => {
+        let className = "";
+        if (isSubMessage)
+            className += "subMessage";
+        else
+            className += "message";
+        return (React.createElement("ul", null, Array.isArray(message)
+            ? message.map((messageItem, index) => (React.createElement("li", { key: index, className: className }, Array.isArray(messageItem) ? (createList(messageItem, true)) : (React.createElement("div", { dangerouslySetInnerHTML: {
+                    __html: formattedTags(cleanMessage(messageItem)) ?? "",
+                } })))))
+            : message));
+    };
+    /**
+     *
+     * @param message Yalnızca alfanümerik karakterleri (harfler ve sayılar) ve boşlukları tutar.
+     * @returns
+     */
+    const cleanMessage = (message) => message.replace(/<\/?[^>]+>/g, "");
+    return (React.createElement("div", { className: className() }, Array.isArray(message) ? (createList(message)) : (React.createElement("p", { dangerouslySetInnerHTML: { __html: formattedTags(cleanMessage(message)) ?? "" } }))));
+};
+export default Alert;

package/dist/components/button/Types.d.ts

@@ -62,7 +62,7 @@ export type Props = {
      * <Button color="success">Hello, World!</Button>
      * ```
      */
-    color?: Colors;
+    _type?: Colors;
     /**
      * Bileşenine ikon eklemeyi sağlar.
      * İkonun kendisini, yönünü ve pozisyonunu tanımlamak için kullanılır.
@@ -152,6 +152,7 @@ export type Props = {
      * ```
      */
     width?: "max-width" | "auto";
+    size?: "large" | "normal" | "small";
     position?: {
         type: "fixed" | "absolute";
         inset: ("top" | "right" | "bottom" | "left")[];

package/dist/components/button/index.js

@@ -1,12 +1,12 @@
 "use client";
 import React, { useRef } from "react";
 import "../../assest/css/button/button.css";
-const Button = ({ children, variant = "filled", shape, color = "primary", border, width = "auto", position, icon, upperCase, ...attributes }) => {
+const Button = ({ children, variant = "filled", shape, _type = "primary", border, width = "auto", size = "normal", position, icon, upperCase, ...attributes }) => {
     // refs
     const _button = useRef(null);
     // methods
     const handleClassName = () => {
-        let className = `ar-button ${variant} ${color} ${width}`;
+        let className = `ar-button ${variant} ${_type} ${width}`;
         if (shape)
             className += ` ar-button-shape ${shape}`;
         if (border) {
@@ -15,6 +15,8 @@ const Button = ({ children, variant = "filled", shape, color = "primary", border
             if (border.radius)
                 className += ` border-radius-${border?.radius}`;
         }
+        if (size)
+            className += ` ${size}`;
         if (position) {
             className += ` ${position.type}`;
             className += ` ${position.inset.map((_inset) => _inset).join(" ")}`;
@@ -39,7 +41,7 @@ const Button = ({ children, variant = "filled", shape, color = "primary", border
     };
     return (React.createElement("button", { ref: _button, ...attributes, className: handleClassName(), onClick: (event) => {
             // Disabled gelmesi durumunda işlem yapmasına izin verme...
-            if (attributes.disabled)
+            if (attributes.disabled || variant === "text")
                 return;
             (() => {
                 const _current = _button.current;

package/dist/components/grid-system/column/Column.js

@@ -4,6 +4,8 @@ const Column = ({ children, column, align }) => {
         let className = Object.entries(column ?? {})
             .map(([key, value]) => `col-${key}-${value}`)
             .join(" ");
+        if (!column)
+            className += "col";
         if (align)
             className += ` ${align}`;
         return className;

package/dist/components/layout/Aside.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { AsideProps } from "./Types";
+declare const Aside: React.FC<AsideProps>;
+export default Aside;