ar-design 0.1.7 → 0.1.8

package/dist/assest/css/css/form/button/button.css

@@ -5,6 +5,7 @@
   border: none;
   border-radius: var(--border-radius-sm);
   font-family: var(--system);
+  font-size: 1rem;
   cursor: pointer;
   transition: background-color 150ms, border 150ms, color 150ms ease-in-out;
   overflow: hidden;

package/dist/assest/css/css/form/input/core/border.css

@@ -15,6 +15,12 @@
   border-radius: var(--border-radius-pill);
 } */
 
+.ar-input-wrapper:has(> .ar-button:is(.filled, .border-style-solid, .border-style-dashed))
+  > .ar-input
+  > input {
+  border-right-color: transparent !important;
+}
+
 /* Addon */
 .ar-input-wrapper:is(.addon) > .addon-before.border-radius-sm {
   border-top-left-radius: var(--border-radius-sm);

package/dist/assest/css/css/form/input/input.css

@@ -21,6 +21,11 @@
   box-sizing: border-box;
   transition: background 250ms, border 250ms, box-shadow 250ms ease-in-out;
 }
+.ar-input-wrapper > .ar-input > input.disabled {
+  background-color: var(--gray-100);
+  border-color: var(--gray-500);
+  cursor: no-drop;
+}
 
 /* Core Css */
 @import url("./core/icon.css");

package/dist/assest/css/form/button/button.css

@@ -5,6 +5,7 @@
   border: none;
   border-radius: var(--border-radius-sm);
   font-family: var(--system);
+  font-size: 1rem;
   cursor: pointer;
   transition: background-color 150ms, border 150ms, color 150ms ease-in-out;
   overflow: hidden;

package/dist/assest/css/form/input/core/border.css

@@ -15,6 +15,12 @@
   border-radius: var(--border-radius-pill);
 } */
 
+.ar-input-wrapper:has(> .ar-button:is(.filled, .border-style-solid, .border-style-dashed))
+  > .ar-input
+  > input {
+  border-right-color: transparent !important;
+}
+
 /* Addon */
 .ar-input-wrapper:is(.addon) > .addon-before.border-radius-sm {
   border-top-left-radius: var(--border-radius-sm);

package/dist/assest/css/form/input/input.css

@@ -21,6 +21,11 @@
   box-sizing: border-box;
   transition: background 250ms, border 250ms, box-shadow 250ms ease-in-out;
 }
+.ar-input-wrapper > .ar-input > input.disabled {
+  background-color: var(--gray-100);
+  border-color: var(--gray-500);
+  cursor: no-drop;
+}
 
 /* Core Css */
 @import url("./core/icon.css");

package/dist/components/{divider → data-display/divider}/index.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import "../../assest/css/divider/divider.css";
+import "../../../assest/css/data-display/divider/divider.css";
 declare const Divider: React.FC;
 export default Divider;

package/dist/components/{divider → data-display/divider}/index.js

@@ -1,5 +1,5 @@
 import React from "react";
-import "../../assest/css/divider/divider.css";
+import "../../../assest/css/data-display/divider/divider.css";
 const Divider = () => React.createElement("hr", { className: "ar-divider" });
 Divider.displayName = "Divider";
 export default Divider;

package/dist/components/{syntax-highlighter → data-display/syntax-highlighter}/index.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "../../assest/css/syntax-highlighter/syntax-highlighter.css";
+import "../../../assest/css/data-display/syntax-highlighter/syntax-highlighter.css";
 declare const SyntaxHighlighter: React.FC<{
     children: React.ReactNode;
     position?: "left" | "center" | "right";

package/dist/components/{syntax-highlighter → data-display/syntax-highlighter}/index.js

@@ -2,8 +2,8 @@
 import React, { useEffect, useRef, useState } from "react";
 import Parser from "./classes/Parser";
 import Compiler from "./classes/Compiler";
-import "../../assest/css/syntax-highlighter/syntax-highlighter.css";
-import Button from "../form/button";
+import "../../../assest/css/data-display/syntax-highlighter/syntax-highlighter.css";
+import Button from "../../form/button";
 const SyntaxHighlighter = ({ children, position = "left" }) => {
     // refs
     const _div = useRef(null);

package/dist/components/{typography → data-display/typography}/index.d.ts

@@ -1,4 +1,4 @@
-import "../../assest/css/typography/typography.css";
+import "../../../assest/css/data-display/typography/typography.css";
 declare const Typography: {
     Title: import("react").FC<import("./title/Types").Props>;
     Paragraph: import("react").FC<import("./paragraph/Types").Props>;

package/dist/components/{typography → data-display/typography}/index.js

@@ -1,6 +1,6 @@
 import Paragraph from "./paragraph/Paragraph";
 import Title from "./title/Title";
-import "../../assest/css/typography/typography.css";
+import "../../../assest/css/data-display/typography/typography.css";
 // @@Export
 const Typography = {
     Title,

package/dist/components/{typography → data-display/typography}/paragraph/Types.d.ts

@@ -1,4 +1,4 @@
-import { Colors } from "../../../libs/types/Colors";
+import { Colors } from "../../../../libs/types/Colors";
 export type ParagraphColors = "gray-100" | "gray-200" | "gray-300" | "gray-400" | "gray-500" | "gray-600" | "gray-700" | "gray-800" | "gray-900";
 export type Props = {
     children: string;

package/dist/components/{alert → feedback/alert}/Types.d.ts

@@ -1,4 +1,4 @@
-import { Colors } from "../../libs/types/Colors";
+import { Colors } from "../../../libs/types/Colors";
 type message = string | message[];
 export type Props = {
     message: message;

package/dist/components/{alert → feedback/alert}/index.d.ts

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

package/dist/components/{alert → feedback/alert}/index.js

@@ -1,6 +1,6 @@
 "use client";
 import React, { useRef } from "react";
-import "../../assest/css/alert/alert.css";
+import "../../../assest/css/feedback/alert/alert.css";
 const Alert = ({ message, type, border = true, emphasize }) => {
     // refs
     let _className = useRef("ar-alert").current;

package/dist/components/form/button-group/index.js

@@ -2,7 +2,7 @@
 import React, { useEffect, useState } from "react";
 import "../../../assest/css/form/button-group/button-group.css";
 import Button from "../button";
-import Alert from "../../alert";
+import Alert from "../../feedback/alert";
 const ButtonGroup = ({ children }) => {
     // states
     const [error, setError] = useState(null);

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

@@ -36,6 +36,9 @@ const Input = ({ variant = "outlined", status = "light", icon, border, button, a
         React.createElement("div", { className: _inputWrapperClassName },
             icon?.element && React.createElement("span", { className: "icon-element" }, icon.element),
             React.createElement("input", { ...attributes, className: _inputClassName, onChange: (event) => {
+                    // Disabled gelmesi durumunda işlem yapmasına izin verme...
+                    if (attributes.disabled)
+                        return;
                     (() => {
                         if (attributes.onChange) {
                             // Mevcut değeri alın
@@ -50,7 +53,7 @@ const Input = ({ variant = "outlined", status = "light", icon, border, button, a
                     })();
                 } })),
         addon?.after && React.createElement("span", { className: _addonAfterClassName }, addon?.after),
-        button && (React.createElement(Button, { ...button, color: status, border: { style: button.border?.style, radius: border?.radius || "sm" } }))));
+        button && (React.createElement(Button, { ...button, color: status, border: { style: button.border?.style, radius: border?.radius || "sm" }, disabled: attributes.disabled }))));
 };
 Input.displayName = "Input";
 export default Input;

package/dist/components/layout/Aside.js

@@ -1,6 +1,6 @@
 "use client";
 import React from "react";
-import Menu from "../menu";
+import Menu from "../navigation/menu";
 import useLayout from "../../libs/core/application/hooks/useLayout";
 const Aside = ({ menu }) => {
     // hooks

package/dist/components/layout/Header.js

@@ -1,6 +1,6 @@
 "use client";
 import React from "react";
-import Menu from "../menu";
+import Menu from "../navigation/menu";
 const Header = ({ logo, menu }) => {
     return (React.createElement("div", { className: "ar-header-with-wrap" },
         typeof logo === "string" ? React.createElement("h1", null, logo) : logo,

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

@@ -1,4 +1,4 @@
-import { MenuProps } from "../menu/Types";
+import { MenuProps } from "../navigation/menu/Types";
 export type LayoutProps = {
     children: React.ReactNode;
 };

package/dist/components/{grid-system → layout/grid-system}/index.d.ts

@@ -1,4 +1,4 @@
-import "../../assest/css/grid-system/grid-system.css";
+import "../../../assest/css/layout/grid-system/grid-system.css";
 declare const Grid: {
     Row: import("react").FC<import("./row/Types").Props>;
     Column: import("react").FC<import("./column/Types").Props>;

package/dist/components/{grid-system → layout/grid-system}/index.js

@@ -1,6 +1,6 @@
 import Column from "./column/Column";
 import Row from "./row/Row";
-import "../../assest/css/grid-system/grid-system.css";
+import "../../../assest/css/layout/grid-system/grid-system.css";
 // @@Export
 const Grid = {
     Row,

package/dist/components/{menu → navigation/menu}/index.d.ts

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

package/dist/components/{menu → navigation/menu}/index.js

@@ -1,7 +1,7 @@
 "use client";
 import React, { useRef, useState } from "react";
-import Divider from "../divider";
-import "../../assest/css/menu/menu.css";
+import "../../../assest/css/navigation/menu/menu.css";
+import Divider from "../../data-display/divider";
 const handleOnClick = (event, item, variant, setSelectedItem, setSelectedMenu) => {
     event.stopPropagation();
     if (variant === "vertical" && item.type === "group")

package/dist/index.d.ts

@@ -2,14 +2,14 @@ import "./assest/css/ar-core.css";
 import Button from "./components/form/button";
 import ButtonGroup from "./components/form/button-group";
 import Input from "./components/form/input";
-import Typography from "./components/typography";
-import Divider from "./components/divider";
-import Alert from "./components/alert";
-import Menu from "./components/menu";
-import type { MenuProps } from "./components/menu/Types";
-import Grid from "./components/grid-system";
+import Typography from "./components/data-display/typography";
+import Divider from "./components/data-display/divider";
+import SyntaxHighlighter from "./components/data-display/syntax-highlighter";
+import Alert from "./components/feedback/alert";
+import Menu from "./components/navigation/menu";
+import type { MenuProps } from "./components/navigation/menu/Types";
+import Grid from "./components/layout/grid-system";
 import Layout from "./components/layout";
 import useLayout from "./libs/core/application/hooks/useLayout";
-import SyntaxHighlighter from "./components/syntax-highlighter";
 export { Button, ButtonGroup, Input, Typography, Divider, Alert, Menu, Grid, Layout, useLayout, SyntaxHighlighter, };
 export type { MenuProps };

package/dist/index.js

@@ -4,18 +4,18 @@ import Button from "./components/form/button";
 import ButtonGroup from "./components/form/button-group";
 import Input from "./components/form/input";
 // Data Display
-import Typography from "./components/typography";
-import Divider from "./components/divider";
+import Typography from "./components/data-display/typography";
+import Divider from "./components/data-display/divider";
+import SyntaxHighlighter from "./components/data-display/syntax-highlighter";
 // Feedback
-import Alert from "./components/alert";
+import Alert from "./components/feedback/alert";
 // Navigation
-import Menu from "./components/menu";
+import Menu from "./components/navigation/menu";
 // Layout
-import Grid from "./components/grid-system";
+import Grid from "./components/layout/grid-system";
 import Layout from "./components/layout";
 import useLayout from "./libs/core/application/hooks/useLayout";
 // Others
-import SyntaxHighlighter from "./components/syntax-highlighter";
 export { 
 // Form Elements
 Button, ButtonGroup, Input, 

package/package.json

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