ar-design 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Kaan ÇETİN
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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

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

package/dist/components/button/index.js

@@ -0,0 +1,54 @@
+"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"]);
+    // 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)
+                className += ` border-style-${border.style}`;
+            if (border.radius)
+                className += ` border-radius-${border === null || border === void 0 ? void 0 : border.radius}`;
+        }
+        if (icon) {
+            if (icon.element && !shape)
+                className += ` icon`;
+            if (icon.direction)
+                className += ` icon-${icon.direction}`;
+            if (icon.position)
+                className += ` icon-${(_a = icon.direction) !== null && _a !== void 0 ? _a : "row"}-${icon.position}`;
+        }
+        if (attributes.disabled)
+            className += ` disabled`;
+        if (attributes.className)
+            className += ` ${attributes.className}`;
+        return className;
+    };
+    return (React.createElement("button", Object.assign({ ref: _button }, attributes, { className: handleClassName(), onClick: (event) => {
+            // Disabled gelmesi durumunda işlem yapmasına izin verme...
+            if (attributes.disabled)
+                return;
+            (() => {
+                const _current = _button.current;
+                const addClass = "active";
+                if (_current && !_current.classList.contains(addClass)) {
+                    // Sınıf ekleniyor...
+                    _current.classList.add(addClass);
+                    // Sınıf 500 milisaniye sonra kaldırlacak.
+                    setTimeout(() => _current.classList.remove(addClass), 750);
+                }
+            })();
+            (() => attributes.onClick && attributes.onClick(event))();
+        } }), icon === null || icon === void 0 ? void 0 :
+        icon.element,
+        typeof children === "string" && upperCase ? children.toLocaleUpperCase() : children));
+};
+export default Button;

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

@@ -0,0 +1,155 @@
+import { Colors } from "../../libs/types/colors";
+export type Props = {
+    /**
+     * Bileşenin içinde render edilecek içeriği belirtir.
+     * Bu içerik bir dize (string) veya bir React JSX elemanı olabilir.
+     *
+     * Örneğin;
+     * - Bir dize: "Hello, World!"
+     * - Bir React JSX elemanı: <span>Hello, World!</span>
+     *
+     * ```jsx
+     * <Button>Hello, World!</Button>
+     *
+     * <Button>
+     *    <span>Hello, World!</span>
+     * </Button>
+     * ```
+     */
+    children?: string | React.JSX.Element;
+    /**
+     * Bileşenin stil varyantını belirtir.
+     * Üç seçenekten biri olabilir: "filled", "outlined" veya "text".
+     *
+     * - `"filled"`: Dolu arka plan rengi ile stilize edilmiş bir varyant.
+     * - `"outlined"`: Sadece kenarlıkları olan, arka planı şeffaf olan bir varyant.
+     * - `"text"`: Arka plan ve kenarlık olmadan sadece metni gösteren bir varyant.
+     *
+     * Bu seçenekler, bileşenin görünümünü ve stilini değiştirir.
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <Button variant="filled">Hello, World!</Button>
+     * ```
+     */
+    variant?: "filled" | "outlined" | "text";
+    /**
+     * Bileşenin şekil varyantını belirtir ve genellikle sadece ikon için kullanılmalıdır.
+     * İki seçenekten biri olabilir: "circle" veya "square".
+     *
+     * - `"circle"`: Daire şeklinde stilize edilmiş bir varyant.
+     * - `"square"`: Kare şeklinde stilize edilmiş bir varyant.
+     *
+     * Bu seçenekler, bileşenin şekilsel görünümünü değiştirir.
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <Button shape="circle">Hello, World!</Button>
+     * ```
+     */
+    shape?: "circle" | "square";
+    /**
+     * Bileşenin renk özelliğini belirtir.
+     * Renklerin tanımlandığı bir `Colors` türü kullanılır.
+     *
+     * `Colors` türü, belirli renklerin ve renk şemalarının tanımlandığı bir enum veya benzeri bir yapıyı temsil eder.
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <Button color="success">Hello, World!</Button>
+     * ```
+     */
+    color?: Colors;
+    /**
+     * Bileşenine ikon eklemeyi sağlar.
+     * İkonun kendisini, yönünü ve pozisyonunu tanımlamak için kullanılır.
+     *
+     * - `element`: İkon olarak kullanılacak React JSX elemanı.
+     * - `direction` (isteğe bağlı): İkonun ve metnin hizalanma yönünü belirtir.
+     *    - `"row"`: İkon ve metin yatay olarak hizalanır.
+     *    - `"column"`: İkon ve metin dikey olarak hizalanır.
+     * - `position` (isteğe bağlı): İkonun metne göre konumunu belirtir.
+     *    - `"start"`: İkon metnin başında yer alır.
+     *    - `"end"`: İkon metnin sonunda yer alır.
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <Button
+     *    icon={{
+     *      element: <MyIcon />,
+     *      direction: "row",
+     *      position: "start"
+     *    }}
+     * >
+     *  Click Me!
+     * </Button>
+     * ```
+     */
+    icon?: {
+        element: React.JSX.Element;
+        direction?: "row" | "column";
+        position?: "start" | "end";
+    };
+    /**
+     * Bileşendeki metni büyük harflere dönüştürüp dönüştürmeyeceğini belirtir.
+     * Boolean (true/false) değeri alır.
+     *
+     * - `true`: Metin büyük harflerle yazılır.
+     * - `false`: Metin olduğu gibi, yani küçük/büyük harf karışımı şeklinde yazılır.
+     *
+     * Bu özellik, metnin stilini özelleştirmek için kullanılır ve isteğe bağlı şekilde çalışır.
+     */
+    upperCase?: boolean;
+    /**
+     * Bileşenin çervesinde düzenleme yapılmasına olanak tanır.
+     * Kenarlığın stilini ve köşe yuvarlama derecesini tanımlamak için kullanılır.
+     *
+     * - `style` (isteğe bağlı): Kenarlığın stilini belirtir.
+     *    - `"solid"`: Düz çizgi şeklinde kenarlık.
+     *    - `"dashed"`: Kesik çizgi şeklinde kenarlık.
+     *    - `"none"`: Kenarlık yok.
+     * - `radius` (isteğe bağlı): Köşe yuvarlama derecesini belirtir.
+     *    - `"sm"`: Küçük yuvarlama.
+     *    - `"lg"`: Büyük yuvarlama.
+     *    - `"xl"`: Ekstra büyük yuvarlama.
+     *    - `"xxl"`: Çok büyük yuvarlama.
+     *    - `"pill"`: Hap şeklinde yuvarlama.
+     *    - `"none"`: Yuvarlama yok.
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <Button
+     *    border={{
+     *     style: "solid",
+     *     radius: "lg"
+     *    }}
+     * >
+     *  Test
+     * </Button>
+     * ```
+     */
+    border?: {
+        style?: "solid" | "dashed" | "none";
+        radius?: "sm" | "lg" | "xl" | "xxl" | "pill" | "none";
+    };
+    /**
+     * Bileşenin genişlik özelliğini belirtir.
+     * Genişliğin nasıl ayarlanacağını tanımlamak için kullanılır.
+     *
+     * - `width` (isteğe bağlı): Genişlik ayarını belirtir.
+     *    - `"max-width"`: Maksimum genişliğe göre ayarlanır.
+     *    - `"auto"`: Otomatik olarak genişliğe göre ayarlanır.
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <Button width="max-width">Submit</Button>
+     * ```
+     */
+    width?: "max-width" | "auto";
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;

package/dist/components/button/type.js

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

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import "./libs/styles/theme.public.css";
+import { default as Button } from "./components/button";
+export { Button };

package/dist/index.js

@@ -0,0 +1,3 @@
+import "./libs/styles/theme.public.css";
+import { default as Button } from "./components/button";
+export { Button };

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

@@ -0,0 +1,8 @@
+@import url("./core/core.css");
+@import url("./core/shape.css");
+@import url("./core/icon.css");
+@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/button/core/border.css

@@ -0,0 +1,18 @@
+.ar-button-core.border-radius-sm {
+  border-radius: var(--border-radius-sm);
+}
+.ar-button-core.border-radius-lg {
+  border-radius: var(--border-radius-lg);
+}
+.ar-button-core.border-radius-xl {
+  border-radius: var(--border-radius-xl);
+}
+.ar-button-core.border-radius-xxl {
+  border-radius: var(--border-radius-xxl);
+}
+.ar-button-core.border-radius-pill {
+  border-radius: var(--border-radius-pill);
+}
+.ar-button-core.border-radius-none {
+  border-radius: 0;
+}

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

@@ -0,0 +1,16 @@
+.ar-button-core {
+  position: relative;
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: var(--border-radius-sm);
+  cursor: pointer;
+  transition: background-color 150ms, border 150ms, color 150ms ease-in-out;
+  overflow: hidden;
+}
+.ar-button-core.disabled {
+  cursor: no-drop;
+}
+
+.ar-button-core.max-width {
+  width: 100%;
+}

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

@@ -0,0 +1,21 @@
+.ar-button-core.icon {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: flex-start;
+  gap: 0 0.5rem;
+}
+.ar-button-core.icon-row {
+  flex-direction: row;
+}
+.ar-button-core.icon-row-end {
+  flex-direction: row-reverse;
+}
+.ar-button-core.icon-column {
+  flex-direction: column;
+}
+.ar-button-core.icon-column-end {
+  flex-direction: column-reverse;
+}

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

@@ -0,0 +1,19 @@
+.ar-button-core.ar-button-shape {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-width: 2rem;
+  min-height: 2rem;
+  padding: 0 !important;
+}
+.ar-button-core.ar-button-shape.circle {
+  border-radius: var(--border-radius-pill);
+}
+.ar-button-core.ar-button-shape.square {
+}

package/dist/libs/styles/button/variant/filled/animation.css

@@ -0,0 +1,95 @@
+@keyframes filled-primary-active-animation {
+  0% {
+    box-shadow: 0 0 0 0px rgba(var(--primary-rgb), 0);
+  }
+  25% {
+    box-shadow: 0 0 0 5px rgba(var(--primary-rgb), 0.25);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px rgba(var(--primary-rgb), 0);
+  }
+}
+
+@keyframes filled-secondary-active-animation {
+  0% {
+    box-shadow: 0 0 0 0px rgba(var(--secondary-rgb), 0);
+  }
+  25% {
+    box-shadow: 0 0 0 5px rgba(var(--secondary-rgb), 0.25);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px rgba(var(--secondary-rgb), 0);
+  }
+}
+
+@keyframes filled-success-active-animation {
+  0% {
+    box-shadow: 0 0 0 0px rgba(var(--success-rgb), 0);
+  }
+  25% {
+    box-shadow: 0 0 0 5px rgba(var(--success-rgb), 0.25);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px rgba(var(--success-rgb), 0);
+  }
+}
+
+@keyframes filled-warning-active-animation {
+  0% {
+    box-shadow: 0 0 0 0px rgba(var(--warning-rgb), 0);
+  }
+  25% {
+    box-shadow: 0 0 0 5px rgba(var(--warning-rgb), 0.25);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px rgba(var(--warning-rgb), 0);
+  }
+}
+
+@keyframes filled-danger-active-animation {
+  0% {
+    box-shadow: 0 0 0 0px rgba(var(--danger-rgb), 0);
+  }
+  25% {
+    box-shadow: 0 0 0 5px rgba(var(--danger-rgb), 0.25);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px rgba(var(--danger-rgb), 0);
+  }
+}
+
+@keyframes filled-information-active-animation {
+  0% {
+    box-shadow: 0 0 0 0px rgba(var(--information-rgb), 0);
+  }
+  25% {
+    box-shadow: 0 0 0 5px rgba(var(--information-rgb), 0.25);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px rgba(var(--information-rgb), 0);
+  }
+}
+
+@keyframes filled-light-active-animation {
+  0% {
+    box-shadow: 0 0 0 0px rgba(var(--dark-rgb), 0);
+  }
+  25% {
+    box-shadow: 0 0 0 5px rgba(var(--dark-rgb), 0.25);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px rgba(var(--dark-rgb), 0);
+  }
+}
+
+@keyframes filled-dark-active-animation {
+  0% {
+    box-shadow: 0 0 0 0px rgba(var(--dark-rgb), 0);
+  }
+  25% {
+    box-shadow: 0 0 0 5px rgba(var(--dark-rgb), 0.25);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px rgba(var(--dark-rgb), 0);
+  }
+}

package/dist/libs/styles/button/variant/filled/core.css

@@ -0,0 +1,84 @@
+@import url("./animation.css");
+
+.ar-button-core.filled {
+  border-color: transparent;
+  color: var(--white);
+}
+
+.ar-button-core.filled.disabled {
+  background-color: var(--gray-100);
+  color: var(--gray-500);
+  border: solid 1px var(--gray-500);
+}
+.ar-button-core.filled:not(.disabled):active::before {
+  position: absolute;
+  inset: 0;
+  content: "";
+  background-color: rgba(var(--black-rgb), 0.25);
+}
+
+.ar-button-core.filled:not(.disabled).primary {
+  background-color: var(--primary);
+}
+.ar-button-core.filled:not(.disabled).primary.active {
+  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
+  animation: filled-primary-active-animation ease-in-out 750ms 0s 1 normal both;
+}
+
+.ar-button-core.filled:not(.disabled).secondary {
+  background-color: var(--secondary);
+}
+.ar-button-core.filled:not(.disabled).secondary.active {
+  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
+  animation: filled-secondary-active-animation ease-in-out 750ms 0s 1 normal both;
+}
+
+.ar-button-core.filled:not(.disabled).success {
+  background-color: var(--success);
+}
+.ar-button-core.filled:not(.disabled).success.active {
+  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
+  animation: filled-success-active-animation ease-in-out 750ms 0s 1 normal both;
+}
+
+.ar-button-core.filled:not(.disabled).warning {
+  background-color: var(--warning);
+  color: var(--warning-font-color);
+}
+.ar-button-core.filled:not(.disabled).warning.active {
+  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
+  animation: filled-warning-active-animation ease-in-out 750ms 0s 1 normal both;
+}
+
+.ar-button-core.filled:not(.disabled).danger {
+  background-color: var(--danger);
+}
+.ar-button-core.filled:not(.disabled).danger.active {
+  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
+  animation: filled-danger-active-animation ease-in-out 750ms 0s 1 normal both;
+}
+
+.ar-button-core.filled:not(.disabled).information {
+  background-color: var(--information);
+}
+.ar-button-core.filled:not(.disabled).information.active {
+  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
+  animation: filled-information-active-animation ease-in-out 750ms 0s 1 normal both;
+}
+
+.ar-button-core.filled:not(.disabled).light {
+  background-color: var(--light);
+  color: var(--gray-800);
+}
+.ar-button-core.filled:not(.disabled).light.active {
+  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
+  animation: filled-light-active-animation ease-in-out 750ms 0s 1 normal both;
+}
+
+.ar-button-core.filled:not(.disabled).dark {
+  background-color: var(--dark);
+}
+.ar-button-core.filled:not(.disabled).dark.active {
+  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
+  animation: filled-dark-active-animation ease-in-out 750ms 0s 1 normal both;
+}

package/dist/libs/styles/button/variant/outlined/animation.css

@@ -0,0 +1,95 @@
+@keyframes outlined-primary-active-animation {
+  0% {
+    box-shadow: 0 0 0 0px rgba(var(--primary-rgb), 0);
+  }
+  25% {
+    box-shadow: 0 0 0 5px rgba(var(--primary-rgb), 0.25);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px rgba(var(--primary-rgb), 0);
+  }
+}
+
+@keyframes outlined-secondary-active-animation {
+  0% {
+    box-shadow: 0 0 0 0px rgba(var(--secondary-rgb), 0);
+  }
+  25% {
+    box-shadow: 0 0 0 5px rgba(var(--secondary-rgb), 0.25);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px rgba(var(--secondary-rgb), 0);
+  }
+}
+
+@keyframes outlined-success-active-animation {
+  0% {
+    box-shadow: 0 0 0 0px rgba(var(--success-rgb), 0);
+  }
+  25% {
+    box-shadow: 0 0 0 5px rgba(var(--success-rgb), 0.25);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px rgba(var(--success-rgb), 0);
+  }
+}
+
+@keyframes outlined-warning-active-animation {
+  0% {
+    box-shadow: 0 0 0 0px rgba(var(--warning-rgb), 0);
+  }
+  25% {
+    box-shadow: 0 0 0 5px rgba(var(--warning-rgb), 0.25);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px rgba(var(--warning-rgb), 0);
+  }
+}
+
+@keyframes outlined-danger-active-animation {
+  0% {
+    box-shadow: 0 0 0 0px rgba(var(--danger-rgb), 0);
+  }
+  25% {
+    box-shadow: 0 0 0 5px rgba(var(--danger-rgb), 0.25);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px rgba(var(--danger-rgb), 0);
+  }
+}
+
+@keyframes outlined-information-active-animation {
+  0% {
+    box-shadow: 0 0 0 0px rgba(var(--information-rgb), 0);
+  }
+  25% {
+    box-shadow: 0 0 0 5px rgba(var(--information-rgb), 0.25);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px rgba(var(--information-rgb), 0);
+  }
+}
+
+@keyframes outlined-light-active-animation {
+  0% {
+    box-shadow: 0 0 0 0px rgba(var(--dark-rgb), 0);
+  }
+  25% {
+    box-shadow: 0 0 0 5px rgba(var(--dark-rgb), 0.25);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px rgba(var(--dark-rgb), 0);
+  }
+}
+
+@keyframes outlined-dark-active-animation {
+  0% {
+    box-shadow: 0 0 0 0px rgba(var(--dark-rgb), 0);
+  }
+  25% {
+    box-shadow: 0 0 0 5px rgba(var(--dark-rgb), 0.25);
+  }
+  100% {
+    box-shadow: 0 0 0 7.5px rgba(var(--dark-rgb), 0);
+  }
+}

package/dist/libs/styles/button/variant/outlined/border.css

@@ -0,0 +1,64 @@
+.ar-button-core.outlined.border-style-solid {
+  border-style: solid;
+}
+.ar-button-core.outlined.border-style-dashed {
+  border-style: dashed;
+}
+.ar-button-core.outlined.border-style-none {
+  border-style: none;
+}
+
+.ar-button-core.outlined.border-style-none:not(.disabled)::before {
+  position: absolute;
+  inset: 0;
+  content: "";
+}
+
+.ar-button-core.outlined.primary.border-style-none:not(.disabled):hover::before {
+  background-color: rgba(var(--primary-rgb), 0.1);
+}
+.ar-button-core.outlined.primary.border-style-none:not(.disabled):active::before {
+  background-color: rgba(var(--primary-rgb), 0.2);
+}
+
+.ar-button-core.outlined.secondary.border-style-none:not(.disabled):hover::before {
+  background-color: rgba(var(--secondary-rgb), 0.1);
+}
+.ar-button-core.outlined.secondary.border-style-none:not(.disabled):active::before {
+  background-color: rgba(var(--secondary-rgb), 0.2);
+}
+
+.ar-button-core.outlined.success.border-style-none:not(.disabled):hover::before {
+  background-color: rgba(var(--success-rgb), 0.1);
+}
+.ar-button-core.outlined.success.border-style-none:not(.disabled):active::before {
+  background-color: rgba(var(--success-rgb), 0.2);
+}
+
+.ar-button-core.outlined.warning.border-style-none:not(.disabled):hover::before {
+  background-color: rgba(var(--warning-rgb), 0.1);
+}
+.ar-button-core.outlined.warning.border-style-none:not(.disabled):active::before {
+  background-color: rgba(var(--warning-rgb), 0.2);
+}
+
+.ar-button-core.outlined.danger.border-style-none:not(.disabled):hover::before {
+  background-color: rgba(var(--danger-rgb), 0.1);
+}
+.ar-button-core.outlined.danger.border-style-none:not(.disabled):active::before {
+  background-color: rgba(var(--danger-rgb), 0.2);
+}
+
+.ar-button-core.outlined.information.border-style-none:not(.disabled):hover::before {
+  background-color: rgba(var(--information-rgb), 0.1);
+}
+.ar-button-core.outlined.information.border-style-none:not(.disabled):active::before {
+  background-color: rgba(var(--information-rgb), 0.2);
+}
+
+.ar-button-core.outlined.dark.border-style-none:not(.disabled):hover::before {
+  background-color: rgba(var(--dark-rgb), 0.1);
+}
+.ar-button-core.outlined.dark.border-style-none:not(.disabled):active::before {
+  background-color: rgba(var(--dark-rgb), 0.2);
+}

package/dist/libs/styles/button/variant/outlined/core.css

@@ -0,0 +1,85 @@
+@import url("./animation.css");
+@import url("./border.css");
+
+.ar-button-core.outlined {
+  background-color: transparent;
+  border-width: 1px;
+  border-color: transparent;
+}
+
+.ar-button-core.outlined.disabled {
+  border-color: var(--gray-500);
+  color: var(--gray-500);
+}
+
+.ar-button-core.outlined:not(.disabled).primary {
+  border-color: var(--primary);
+  color: var(--primary);
+}
+.ar-button-core.outlined:not(.disabled).primary.active {
+  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
+  animation: outlined-primary-active-animation ease-in-out 750ms 0s 1 normal both;
+}
+
+.ar-button-core.outlined:not(.disabled).secondary {
+  border-color: var(--secondary);
+  color: var(--secondary);
+}
+.ar-button-core.outlined:not(.disabled).secondary.active {
+  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
+  animation: outlined-secondary-active-animation ease-in-out 750ms 0s 1 normal both;
+}
+
+.ar-button-core.outlined:not(.disabled).success {
+  border-color: var(--success);
+  color: var(--success);
+}
+.ar-button-core.outlined:not(.disabled).success.active {
+  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
+  animation: outlined-success-active-animation ease-in-out 750ms 0s 1 normal both;
+}
+
+.ar-button-core.outlined:not(.disabled).warning {
+  border-color: var(--warning);
+  color: var(--warning);
+}
+.ar-button-core.outlined:not(.disabled).warning.active {
+  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
+  animation: outlined-warning-active-animation ease-in-out 750ms 0s 1 normal both;
+}
+
+.ar-button-core.outlined:not(.disabled).danger {
+  border-color: var(--danger);
+  color: var(--danger);
+}
+.ar-button-core.outlined:not(.disabled).danger.active {
+  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
+  animation: outlined-danger-active-animation ease-in-out 750ms 0s 1 normal both;
+}
+
+.ar-button-core.outlined:not(.disabled).information {
+  border-color: var(--information);
+  color: var(--information);
+}
+.ar-button-core.outlined:not(.disabled).information.active {
+  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
+  animation: outlined-information-active-animation ease-in-out 750ms 0s 1 normal both;
+}
+
+.ar-button-core.outlined:not(.disabled).light {
+  border-color: var(--light);
+  color: var(--gray-500);
+}
+.ar-button-core.outlined:not(.disabled).light.active {
+  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
+  animation: outlined-light-active-animation ease-in-out 750ms 0s 1 normal both;
+}
+
+.ar-button-core.outlined:not(.disabled).dark {
+  border-color: var(--dark);
+  color: var(--dark);
+}
+.ar-button-core.outlined:not(.disabled).dark.active {
+  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
+  animation: outlined-dark-active-animation ease-in-out 750ms 0s 1 normal both;
+}

package/dist/libs/styles/theme.public.css

@@ -0,0 +1,109 @@
+/* #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;
+  --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: #f11a7b;
+  --red-rgb: 241, 26, 123;
+  --green: #00ff00;
+  --green-rgb: 0, 255, 0;
+  --blue: #0000ff;
+  --blue-rgb: 0, 0, 255;
+
+  /* ... */
+  --primary: #007bff;
+  --primary-active: #005abb;
+  --primary-rgb: 0, 123, 255;
+  /* --primary-font: #004a99; */
+  --secondary: #6c757d;
+  --secondary-active: #495055;
+  --secondary-rgb: 108, 117, 125;
+  /* --secondary-font: #40454a; */
+  --success: #28a745;
+  --success-active: #1c7a32;
+  --success-rgb: 40, 167, 69;
+  /* --success-font: #176027; */
+  --warning: #ffc107;
+  --warning-active: #cf9c05;
+  --warning-rgb: 255, 193, 7;
+  --warning-font-color: #463500;
+  --danger: #dc3545;
+  --danger-active: #af2936;
+  --danger-rgb: 220, 53, 69;
+  /* --danger-font: #a22531; */
+  --information: #17a2b8;
+  --information-active: #107c8c;
+  --information-rgb: 23, 162, 184;
+  /* --info-font: #0b5460; */
+  --light: #f8f9fa;
+  --light-active: #a0a1a3;
+  --light-rgb: 248, 249, 250;
+  /* --light-font: var(--gray-300); */
+  --dark: #343a40;
+  --dark-active: #23272b;
+  --dark-rgb: 52, 58, 64;
+  /* --dark-font: var(--gray-800); */
+}
+/* #endregion */
+/* Color Palette */
+
+/* #region Border */
+:root {
+  /* Border */
+
+  /* Border Radius */
+  --border-radius: 0.465rem;
+  --border-radius-sm: 0.25rem;
+  --border-radius-lg: 0.5rem;
+  --border-radius-xl: 1rem;
+  --border-radius-xxl: 2rem;
+  --border-radius-pill: 50rem;
+}
+/* #endregion */
+/* Border */
+
+/* #region Box Shadow */
+:root {
+  --box-shadow: 0 0.5rem 1.5rem -0.5rem var(--gray-500);
+}
+/* #endregion */
+/* Box Shadow */

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

@@ -0,0 +1 @@
+export type Colors = "primary" | "secondary" | "success" | "danger" | "warning" | "information" | "light" | "dark";

package/dist/libs/types/colors.js

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

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "ar-design",
+  "version": "0.0.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rm -rf dist/ && npm run build:esm && npm run build:post-mac",
+    "build:esm": "tsc",
+    "build:cjs": "tsc --module commonjs --outdir dist/cjs",
+    "build:post-mac": "mkdir -p dist/libs/styles && cp -r ./src/libs/styles dist/libs/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kaancetin-f/ar-design.git"
+  },
+  "keywords": [
+    "react",
+    "next",
+    "ui",
+    "desing"
+  ],
+  "author": "Kaan ÇETİN",
+  "license": "MIT",
+  "description": "AR Design...",
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.2.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "ts-node": "^10.9.2",
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.4"
+  }
+}