ar-design 0.0.0 → 0.0.2

package/dist/components/button/{type.d.ts → Types.d.ts}

@@ -1,4 +1,4 @@
-import { Colors } from "../../libs/types/colors";
+import { Colors } from "../../libs/types/Colors";
 export type Props = {
     /**
      * Bileşenin içinde render edilecek içeriği belirtir.

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Props } from "./type";
+import { Props } from "./Types";
 import "../../libs/styles/button/button.css";
 declare const Button: React.FC<Props>;
 export default Button;

package/dist/components/button/index.js

@@ -1,22 +1,19 @@
 "use client";
-import { __rest } from "tslib";
 import React, { useRef } from "react";
 import "../../libs/styles/button/button.css";
-const Button = (_a) => {
-    var { children, variant = "filled", shape, color = "primary", border, width = "auto", icon, upperCase } = _a, attributes = __rest(_a, ["children", "variant", "shape", "color", "border", "width", "icon", "upperCase"]);
+const Button = ({ children, variant = "filled", shape, color = "primary", border, width = "auto", icon, upperCase, ...attributes }) => {
     // refs
     const _button = useRef(null);
     // methods
     const handleClassName = () => {
-        var _a;
         let className = `ar-button-core ${variant} ${color} ${width}`;
         if (shape)
             className += ` ar-button-shape ${shape}`;
-        if (variant !== "filled" && border) {
-            if (border.style)
+        if (border) {
+            if (variant !== "filled" && border.style)
                 className += ` border-style-${border.style}`;
             if (border.radius)
-                className += ` border-radius-${border === null || border === void 0 ? void 0 : border.radius}`;
+                className += ` border-radius-${border?.radius}`;
         }
         if (icon) {
             if (icon.element && !shape)
@@ -24,7 +21,7 @@ const Button = (_a) => {
             if (icon.direction)
                 className += ` icon-${icon.direction}`;
             if (icon.position)
-                className += ` icon-${(_a = icon.direction) !== null && _a !== void 0 ? _a : "row"}-${icon.position}`;
+                className += ` icon-${icon.direction ?? "row"}-${icon.position}`;
         }
         if (attributes.disabled)
             className += ` disabled`;
@@ -32,7 +29,7 @@ const Button = (_a) => {
             className += ` ${attributes.className}`;
         return className;
     };
-    return (React.createElement("button", Object.assign({ ref: _button }, attributes, { className: handleClassName(), onClick: (event) => {
+    return (React.createElement("button", { ref: _button, ...attributes, className: handleClassName(), onClick: (event) => {
             // Disabled gelmesi durumunda işlem yapmasına izin verme...
             if (attributes.disabled)
                 return;
@@ -47,8 +44,8 @@ const Button = (_a) => {
                 }
             })();
             (() => attributes.onClick && attributes.onClick(event))();
-        } }), icon === null || icon === void 0 ? void 0 :
-        icon.element,
+        } },
+        icon?.element,
         typeof children === "string" && upperCase ? children.toLocaleUpperCase() : children));
 };
 export default Button;

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

@@ -0,0 +1,4 @@
+import React from "react";
+import "../../libs/styles/divider/divider.css";
+declare const Divider: React.FC;
+export default Divider;

package/dist/components/divider/index.js

@@ -0,0 +1,4 @@
+import React from "react";
+import "../../libs/styles/divider/divider.css";
+const Divider = () => React.createElement("hr", { className: "ar-divider-core" });
+export default Divider;

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

@@ -0,0 +1,11 @@
+import React from "react";
+export type MenuItemType = "group" | "divider" | "none";
+export interface MenuProps {
+    render?: string | React.JSX.Element;
+    type?: MenuItemType;
+    icon?: React.JSX.Element;
+    submenu?: MenuProps[];
+}
+export type Props = {
+    data: MenuProps[];
+} & React.HTMLAttributes<HTMLElement>;

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

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

package/dist/components/menu/index.js

@@ -0,0 +1,57 @@
+"use client";
+import React, { useRef } from "react";
+import "../../libs/styles/menu/menu.css";
+import Divider from "../divider";
+const handleOnClick = (event, item) => {
+    event.stopPropagation();
+    if (item.type === "group")
+        return;
+    const _current = event.target;
+    const ulElement = _current.nextElementSibling;
+    if (_current && item.submenu && item.submenu.length > 0) {
+        _current.classList.toggle("ar-angle-down");
+        _current.classList.toggle("ar-angle-up");
+    }
+    if (ulElement)
+        ulElement.classList.toggle("opened");
+};
+/**
+ * Alt menüleri sürekli olarak eklemek için özyinelemeli fonksiyon.
+ * @param item - Menü öğelerinin dizisi
+ * @param type - "group" | "divider" | "none" türlerinden birisi gönderilmelidir.
+ * @returns Menü yapısını temsil eden iç içe geçmiş liste
+ */
+const SubMenu = ({ items, type }) => {
+    if (!items)
+        return null;
+    // refs
+    let _className_ul = useRef("ar-menu-core-list-item-groups").current;
+    let _className_li = useRef("ar-menu-core-list-item-group-item").current;
+    let _className_groupTitle = useRef("ar-menu-core-list-item-group-item-title").current;
+    if (type === "group")
+        _className_ul += " opened";
+    return (React.createElement("ul", { className: _className_ul }, items.map((item, index) => {
+        if (item.submenu && item.submenu.length > 0) {
+            if (item.type !== "group")
+                _className_groupTitle += " ar-angle-down";
+        }
+        return (React.createElement("li", { key: index, className: _className_li, onClick: (event) => handleOnClick(event, item) },
+            React.createElement("div", { className: _className_groupTitle }, item.render),
+            React.createElement(SubMenu, { items: item.submenu, type: item.type })));
+    })));
+};
+const Menu = ({ data, ...attributes }) => {
+    // refs
+    let _className_groupTitle = useRef("ar-menu-core-list-item-group-item-title").current;
+    return (React.createElement("nav", { className: "ar-menu-core", ...attributes },
+        React.createElement("ul", { className: "ar-menu-core-list" }, data.map((menuItem, index) => {
+            if (menuItem.submenu && menuItem.submenu.length > 0) {
+                if (menuItem.type !== "group")
+                    _className_groupTitle += " ar-angle-down";
+            }
+            return (React.createElement("li", { key: index, className: "ar-menu-core-list-item", onClick: (event) => handleOnClick(event, menuItem) },
+                menuItem.type === "divider" ? React.createElement(Divider, null) : React.createElement("div", { className: _className_groupTitle }, menuItem.render),
+                React.createElement(SubMenu, { items: menuItem.submenu })));
+        }))));
+};
+export default Menu;

package/dist/index.d.ts

@@ -1,3 +1,9 @@
-import "./libs/styles/theme.public.css";
-import { default as Button } from "./components/button";
+import "./libs/styles/ar-core.css";
+import Button from "./components/button";
 export { Button };
+import Divider from "./components/divider";
+export { Divider };
+import Menu from "./components/menu";
+export { Menu };
+import type { MenuProps } from "./components/menu/Types";
+export type { MenuProps };

package/dist/index.js

@@ -1,3 +1,7 @@
-import "./libs/styles/theme.public.css";
-import { default as Button } from "./components/button";
+import "./libs/styles/ar-core.css";
+import Button from "./components/button";
 export { Button };
+import Divider from "./components/divider";
+export { Divider };
+import Menu from "./components/menu";
+export { Menu };

package/dist/libs/styles/{theme.public.css → ar-core.css}

@@ -1,31 +1,3 @@
-/* #region General */
-*,
-*::before,
-*::after {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  list-style-type: none;
-  font-size: 0.8rem;
-  outline: none;
-  letter-spacing: 0.5px;
-}
-
-html {
-  font-size: 1rem;
-}
-
-body {
-  background-color: var(--pantone-black);
-}
-
-a {
-  text-decoration: none;
-  color: inherit;
-}
-/* #endregion */
-/* General */
-
 /* #region Color Palette */
 :root {
   --white: #fff;

package/dist/libs/styles/button/button.css

@@ -4,5 +4,3 @@
 @import url("./core/border.css");
 @import url("./variant/filled/core.css");
 @import url("./variant/outlined/core.css");
-
-/* Ek CSS kuralları buraya eklenebilir */

package/dist/libs/styles/divider/core/core.css

@@ -0,0 +1,4 @@
+.ar-divider-core {
+  border: none;
+  border-bottom: solid 1px var(--gray-200);
+}

package/dist/libs/styles/divider/divider.css

@@ -0,0 +1 @@
+@import url("./core/core.css");

package/dist/libs/styles/menu/core/core.css

@@ -0,0 +1,37 @@
+@import url("./open-or-close.css");
+
+.ar-menu-core {
+  background-color: var(--white);
+}
+.ar-menu-core ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.ar-menu-core ul li {
+  padding: 0.75rem;
+}
+.ar-menu-core ul li:last-child {
+  padding-bottom: 0;
+}
+.ar-menu-core ul li ul {
+  margin-left: 0.25rem;
+  padding-left: 0.25rem;
+}
+
+.ar-menu-core > .ar-menu-core-list {
+  display: flex;
+  flex-direction: column;
+}
+.ar-menu-core > .ar-menu-core-list > .ar-menu-core-list-item {
+}
+.ar-menu-core > .ar-menu-core-list > .ar-menu-core-list-item > .ar-menu-core-list-item-group-item-title {
+}
+.ar-menu-core > .ar-menu-core-list > .ar-menu-core-list-item > .ar-menu-core-list-item-groups {
+}
+.ar-menu-core
+  > .ar-menu-core-list
+  > .ar-menu-core-list-item
+  > .ar-menu-core-list-item-groups
+  > .ar-menu-core-list-item-group-item {
+}

package/dist/libs/styles/menu/core/open-or-close.css

@@ -0,0 +1,32 @@
+.ar-menu-core ul li ul {
+  opacity: 0;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 150ms ease-in-out, opacity 150ms ease-in-out;
+}
+.ar-menu-core .ar-menu-core-list-item-groups.opened {
+  opacity: 1;
+  max-height: 100rem;
+}
+.ar-menu-core .ar-menu-core-list-item-group-item-title {
+  display: flex;
+  align-items: center;
+}
+.ar-menu-core .ar-menu-core-list-item-group-item-title:is(.ar-angle-down, .ar-angle-up)::after {
+  display: inline-block;
+  position: relative;
+  top: -1.5px;
+  content: "";
+  width: 0.25rem;
+  height: 0.25rem;
+  margin-left: 0.5rem;
+  border: solid 2px transparent;
+  border-right-color: red;
+  border-bottom-color: red;
+  transform-origin: center;
+  transform: rotate(45deg);
+  transition: transform 250ms ease-in-out;
+}
+.ar-menu-core .ar-menu-core-list-item-group-item-title.ar-angle-up::after {
+  transform: rotate(585deg);
+}

package/dist/libs/styles/menu/menu.css

@@ -0,0 +1 @@
+@import url("./core/core.css");

package/dist/libs/types/Colors.js

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

package/package.json

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