ar-design 0.2.84 → 0.2.86

package/dist/components/data-display/card/index.js

@@ -1,15 +1,13 @@
 import React from "react";
-import Typography from "../typography";
 import "../../../assets/css/components/data-display/card/styles.css";
 import Utils from "../../../libs/infrastructure/shared/Utils";
-const { Title } = Typography;
-const Card = ({ children, title = "", actions, status }) => {
+const Card = ({ children, title, actions, variant = "filled", status }) => {
     // variables
-    const _titleClassName = ["title"];
-    _titleClassName.push(...Utils.GetClassName(undefined, status, undefined, undefined, undefined, undefined, undefined));
-    return (React.createElement("div", { className: "ar-card" },
-        title && (React.createElement("div", { className: _titleClassName.map((c) => c).join(" ") },
-            React.createElement(Title, { Level: "h4" }, title),
+    const _className = ["ar-card"];
+    _className.push(...Utils.GetClassName(variant, status, undefined, undefined, undefined, undefined, undefined));
+    return (React.createElement("div", { className: _className.map((c) => c).join(" ") },
+        title && (React.createElement("div", { className: "title" },
+            React.createElement("h4", null, title),
             React.createElement("div", null, actions))),
         React.createElement("div", { className: "content" }, children)));
 };

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

@@ -1,5 +1,5 @@
 import React from "react";
-import "../../../assets/css/components/feedback/alert/alert.css";
+import "../../../assets/css/components/feedback/alert/styles.css";
 import IProps from "./IProps";
 declare const Alert: React.FC<IProps>;
 export default Alert;

package/dist/components/feedback/alert/index.js

@@ -1,6 +1,6 @@
 "use client";
 import React from "react";
-import "../../../assets/css/components/feedback/alert/alert.css";
+import "../../../assets/css/components/feedback/alert/styles.css";
 import Utils from "../../../libs/infrastructure/shared/Utils";
 const Alert = ({ children, message, variant = "filled", status = "primary", border = { radius: "sm" }, emphasize, }) => {
     const _className = ["ar-alert"];

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

@@ -2,17 +2,17 @@
 import Utils from "../../../libs/infrastructure/shared/Utils";
 import React, { forwardRef, useRef } from "react";
 import "../../../assets/css/components/form/checkbox/checkbox.css";
-const Checkbox = forwardRef(({ label, size = "normal", color, border = { radius: "sm" }, upperCase, ...attributes }, ref) => {
+const Checkbox = forwardRef(({ label, size = "normal", color = "blue", border = { radius: "sm" }, upperCase, ...attributes }, ref) => {
     // refs
     const _checkbox = useRef(null);
     const _checkboxClassName = ["ar-checkbox"];
-    const isChecked = attributes.checked ?? false;
-    _checkboxClassName.push(...Utils.GetClassName("filled", undefined, isChecked ? color : "light", border, size, undefined, attributes.className));
+    _checkboxClassName.push(...Utils.GetClassName("filled", undefined, attributes.checked ? color : "light", border, size, undefined, attributes.className));
     return (React.createElement("div", { className: "ar-checkbox-wrapper" },
         React.createElement("label", null,
             React.createElement("input", { ref: ref, type: "checkbox", ...attributes, size: 0, onChange: (event) => {
                     // (() => {
-                    //   attributes.onChange?.(event);
+                    //   const _current = _checkbox.current;
+                    //   if (!_current) return;
                     // })();
                     (() => attributes.onChange && attributes.onChange(event))();
                 } }),

package/dist/components/form/radio/IProps.d.ts

@@ -1,6 +1,6 @@
-import { IBorder, IColors, IIcon, ISize, IStatus, IUpperCase, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
+import { IBorder, IColors, IIcon, ISize, IUpperCase, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
 import { Status } from "../../../libs/types";
-interface IProps extends IVariant, IStatus, IColors, IBorder, IIcon, ISize, IUpperCase, IValidation, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "size" | "color"> {
+interface IProps extends IVariant, IColors, IBorder, IIcon, ISize, IUpperCase, IValidation, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "size" | "color"> {
     /**
      * Bileşenin başlığı veya etiket metnidir.
      *

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

@@ -2,12 +2,12 @@
 import React, { forwardRef, useRef } from "react";
 import "../../../assets/css/components/form/radio/radio.css";
 import Utils from "../../../libs/infrastructure/shared/Utils";
-const Radio = forwardRef(({ label, size = "normal", status, color, border = { radius: "sm" }, trace, upperCase, ...attributes }, ref) => {
+const Radio = forwardRef(({ label, size = "normal", color = "blue", border = { radius: "pill" }, trace, upperCase, ...attributes }, ref) => {
     // refs
     const _checkbox = useRef(null);
     const _checkboxClassName = ["ar-radio"];
     const _traceClassName = ["trace", "filled"];
-    _checkboxClassName.push(...Utils.GetClassName("filled", status, color, border, size, undefined, attributes.className));
+    _checkboxClassName.push(...Utils.GetClassName("filled", undefined, attributes.checked ? color : "light", border, size, undefined, attributes.className));
     if (trace && Object.keys(trace).length > 0)
         _traceClassName.push(trace.color);
     return (React.createElement("div", { className: "ar-radio-wrapper" },

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

@@ -42,7 +42,7 @@ export interface IVariant<T extends {
      * <Component variant="filled">Hello, World!</Component>
      * ```
      */
-    variant?: T["component"] extends "alert" ? Exclude<Variants, "outlined" | "borderless"> : Variants;
+    variant?: T["component"] extends "alert" ? Exclude<Variants, "outlined" | "borderless"> : T["component"] extends "card" ? Exclude<Variants, "dashed" | "borderless"> : Variants;
 }
 export interface IStatus<T extends {
     component?: string;
@@ -56,7 +56,7 @@ export interface IStatus<T extends {
      * <Component status="success">Hello, World!</Component>
      * ```
      */
-    status?: T["component"] extends "alert" ? Exclude<Status, "primary-light" | "secondary" | "information" | "dark" | "light"> : Status;
+    status?: T["component"] extends "alert" ? Exclude<Status, "primary-light" | "secondary" | "information" | "dark" | "light"> : T["component"] extends "card" ? Exclude<Status, "primary-light" | "secondary" | "information" | "dark" | "light"> : Status;
 }
 export interface IColors {
     /**

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

@@ -71,7 +71,7 @@ export type Errors<TData> = Partial<{
 export type MimeTypes = "image/jpeg" | "image/png" | "image/gif" | "image/webp" | "image/svg+xml" | "image/bmp" | "image/tiff" | "application/pdf" | "application/msword" | "application/vnd.openxmlformats-officedocument.wordprocessingml.document" | "application/vnd.ms-excel" | "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" | "application/vnd.openxmlformats-officedocument.presentationml.presentation" | "application/zip" | "application/x-rar-compressed" | "application/x-7z-compressed" | "application/gzip" | "application/json" | "application/xml" | "text/plain" | "text/csv" | "text/html" | "video/mp4" | "video/quicktime" | "video/x-msvideo" | "video/x-matroska" | "video/webm" | "video/x-flv" | "audio/mpeg" | "audio/wav" | "audio/ogg" | "audio/aac" | "audio/flac" | "application/octet-stream";
 export type FileCategory = "image" | "document" | "spreadsheet" | "presentation" | "archive" | "text" | "video" | "audio" | "json" | "xml" | "binary" | "other";
 export type IconVariants = "linear" | "fill";
-export type Icons = "Add" | "ArrowLeft" | "ArrowRight" | "Bold" | "BulletList" | "CameraReels" | "CheckAll" | "CloseCircle" | "CloseSquare" | "CloudUpload" | "Document" | "Download" | "Drive" | "ExclamationCircle" | "ExclamationDiamond" | "Eye" | "File" | "FileEarmark" | "FileTypeCsv" | "FileTypeDoc" | "FileTypeDocx" | "FileTypeHtml" | "FileTypeJson" | "FileTypePdf" | "FileTypePptx" | "FileTypeTxt" | "FileTypeXls" | "FileTypeXlsx" | "FileTypeXml" | "FileTypeZip" | "Filter" | "Folder" | "Image" | "Import" | "Italic" | "NumberList" | "Strikethrough" | "TextAlingCenter" | "TextAlingLeft" | "TextAlingRight" | "TickCircle" | "Trash" | "Underline" | "Upload" | "Warning" | "XCircle";
+export type Icons = "Add" | "ArrowLeft" | "ArrowRight" | "Bold" | "BulletList" | "CameraReels" | "CheckAll" | "CloseCircle" | "CloseSquare" | "CloudUpload" | "Document" | "Download" | "ExclamationCircle" | "ExclamationDiamond" | "Eye" | "File" | "FileEarmark" | "FileTypeCsv" | "FileTypeDoc" | "FileTypeDocx" | "FileTypeHtml" | "FileTypeJson" | "FileTypePdf" | "FileTypePptx" | "FileTypeTxt" | "FileTypeXls" | "FileTypeXlsx" | "FileTypeXml" | "FileTypeZip" | "Filter" | "Folder" | "Import" | "Italic" | "NumberList" | "Strikethrough" | "TextAlingCenter" | "TextAlingLeft" | "TextAlingRight" | "TickCircle" | "Trash" | "Underline" | "Upload" | "Warning" | "XCircle";
 export type PieChartDataType = {
     value: number;
     text: string;

package/package.json

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

package/dist/assets/css/core/statuses.css

@@ -1,206 +0,0 @@
-/* #region PRIMARY */
-.filled {
-  &.primary {
-    background-color: var(--blue-100);
-    color: var(--blue-700);
-  }
-}
-.surface {
-  &.primary {
-    background-color: var(--blue-100);
-    border: solid 1px var(--blue-300);
-    color: var(--blue-700);
-  }
-}
-.dashed {
-  &.primary {
-    border: dashed 1px var(--blue-300);
-    color: var(--blue-700);
-  }
-}
-/* #endregion */
-/* PRIMARY */
-
-/* #region PRIMARY-LIGHT */
-.filled {
-  &.primary-light {
-    background-color: var(--blue-100);
-    color: var(--blue-700);
-  }
-}
-.surface {
-  &.primary-light {
-    background-color: var(--blue-100);
-    border: solid 1px var(--blue-300);
-    color: var(--blue-700);
-  }
-}
-.dashed {
-  &.primary-light {
-    border: dashed 1px var(--blue-300);
-    color: var(--blue-700);
-  }
-}
-/* #endregion */
-/* PRIMARY-LIGHT */
-
-/* #region SECONDARY */
-.filled {
-  &.secondary {
-    background-color: var(--blue-100);
-    color: var(--blue-700);
-  }
-}
-.surface {
-  &.secondary {
-    background-color: var(--blue-100);
-    border: solid 1px var(--blue-300);
-    color: var(--blue-700);
-  }
-}
-.dashed {
-  &.secondary {
-    border: dashed 1px var(--blue-300);
-    color: var(--blue-700);
-  }
-}
-/* #endregion */
-/* SECONDARY */
-
-/* #region SUCCESS */
-.filled {
-  &.success {
-    background-color: var(--green-100);
-    color: var(--green-700);
-  }
-}
-.surface {
-  &.success {
-    background-color: var(--green-100);
-    border: solid 1px var(--green-300);
-    color: var(--green-700);
-  }
-}
-.dashed {
-  &.success {
-    border: dashed 1px var(--green-300);
-    color: var(--green-700);
-  }
-}
-/* #endregion */
-/* SUCCESS */
-
-/* #region WARNING */
-.filled {
-  &.warning {
-    background-color: var(--orange-100);
-    color: var(--orange-700);
-  }
-}
-.surface {
-  &.warning {
-    background-color: var(--orange-100);
-    border: solid 1px var(--orange-300);
-    color: var(--orange-700);
-  }
-}
-.dashed {
-  &.warning {
-    border: dashed 1px var(--orange-300);
-    color: var(--orange-700);
-  }
-}
-/* #endregion */
-/* WARNING */
-
-/* #region DANGER */
-.filled {
-  &.danger {
-    background-color: var(--red-100);
-    color: var(--red-700);
-  }
-}
-.surface {
-  &.danger {
-    background-color: var(--red-100);
-    border: solid 1px var(--red-300);
-    color: var(--red-700);
-  }
-}
-.dashed {
-  &.danger {
-    border: dashed 1px var(--red-300);
-    color: var(--red-700);
-  }
-}
-/* #endregion */
-/* DANGER */
-
-/* #region INFORMATION */
-.filled {
-  &.information {
-    background-color: var(--red-100);
-    color: var(--red-700);
-  }
-}
-.surface {
-  &.information {
-    background-color: var(--red-100);
-    border: solid 1px var(--red-300);
-    color: var(--red-700);
-  }
-}
-.dashed {
-  &.information {
-    border: dashed 1px var(--red-300);
-    color: var(--red-700);
-  }
-}
-/* #endregion */
-/* INFORMATION */
-
-/* #region DARK */
-.filled {
-  &.dark {
-    background-color: var(--red-100);
-    color: var(--red-700);
-  }
-}
-.surface {
-  &.dark {
-    background-color: var(--red-100);
-    border: solid 1px var(--red-300);
-    color: var(--red-700);
-  }
-}
-.dashed {
-  &.dark {
-    border: dashed 1px var(--red-300);
-    color: var(--red-700);
-  }
-}
-/* #endregion */
-/* DARK */
-
-/* #region LIGHT */
-.filled {
-  &.light {
-    background-color: var(--red-100);
-    color: var(--red-700);
-  }
-}
-.surface {
-  &.light {
-    background-color: var(--red-100);
-    border: solid 1px var(--red-300);
-    color: var(--red-700);
-  }
-}
-.dashed {
-  &.light {
-    border: dashed 1px var(--red-300);
-    color: var(--red-700);
-  }
-}
-/* #endregion */
-/* LIGHT */