ar-design 0.0.6 → 0.0.8

package/dist/components/syntax-highlighter/classes/Compiler.d.ts

@@ -0,0 +1,7 @@
+declare class Compiler {
+    _code: React.RefObject<HTMLElement>;
+    private _attributesCount;
+    constructor(code: React.RefObject<HTMLElement>);
+    Jsx: (elements: string[]) => void;
+}
+export default Compiler;

package/dist/components/syntax-highlighter/classes/Compiler.js

@@ -0,0 +1,86 @@
+class Compiler {
+    _code;
+    _attributesCount = 0;
+    constructor(code) {
+        this._code = code;
+    }
+    Jsx = (elements) => {
+        elements.forEach((element) => {
+            // Open Tag
+            element = element.replace(/\[open\](.*?)\[\/open\]/g, (_, p1, p2) => {
+                return `<span>${p1 ?? p2}</span>`;
+            });
+            // Close Tag
+            const closeRegex = /\[close\](.*?)\[\/close\]|\[close-slash\](.*?)\[\/close-slash\]/g;
+            element = element.replace(closeRegex, (_, p1) => {
+                return `<span>${p1}</span>`;
+            });
+            // Tag
+            element = element.replace(/\[tag\](.*?)\[\/tag\]/g, (_, p1) => {
+                return `<span class="ar-jsx-tag">${p1}</span>`;
+            });
+            // React Custom Tag
+            element = element.replace(/\[react-tag\](.*?)\[\/react-tag\]/g, (_, p1) => {
+                return `<span class="ar-jsx-custom-tag">${p1}</span>`;
+            });
+            // Attributes
+            element = element.replace(/\[attributes\](.*?)\[\/attributes\]/g, (_, p1) => {
+                let _className = "ar-jsx-attributes";
+                this._attributesCount = Number(_.match(/=/g)?.length);
+                if (this._attributesCount >= 5)
+                    _className += " type-column";
+                return `<span class="${_className}">${p1}</span>`;
+            });
+            // Attribute
+            element = element.replace(/\[attribute\](.*?)\[\/attribute\]/g, (_, p1) => {
+                return `<span class="ar-jsx-attribute">${p1}</span>`;
+            });
+            // Child Attribute
+            element = element.replace(/\[child-attribute\](.*?)\[\/child-attribute\]/g, (_, p1) => {
+                return `<span class="ar-jsx-attribute">${p1}</span>`;
+            });
+            // Attribute Key
+            element = element.replace(/\[attribute-key\](.*?)\[\/attribute-key\]/g, (_, p1) => {
+                return `<span class="ar-jsx-attribute-key">${p1}</span>`;
+            });
+            // Equal "="
+            element = element.replace(/\[equal\](.*?)\[\/equal\]/g, (_, p1) => {
+                return `<span>${p1}</span>`;
+            });
+            // Colon ":"
+            element = element.replace(/\[colon\](.*?)\[\/colon\]/g, (_, p1) => {
+                return `<span>${p1}</span>`;
+            });
+            // Attributes Values
+            element = element.replace(/\[string\](.*?)\[\/string\]/g, (_, p1) => {
+                return `<span class="ar-jsx-string-value">"${p1}"</span>`;
+            });
+            // Number
+            element = element.replace(/\[number\](.*?)\[\/number\]/g, (_, p1) => {
+                return `<span class="ar-jsx-number-value">${p1}</span>`;
+            });
+            // Boolean
+            element = element.replace(/\[boolean\](.*?)\[\/boolean\]/g, (_, p1) => {
+                return `<span class="ar-jsx-boolean-value"><span>{</span>${p1}<span>}</span></span>`;
+            });
+            // Object
+            element = element.replace(/\[object\](.*?)\[\/object\]/g, (_, p1) => {
+                let _className = "ar-jsx-object-value";
+                let _lineBreakSpaces = " ";
+                if (this._attributesCount >= 5) {
+                    _className += " type-column";
+                    _lineBreakSpaces = "";
+                }
+                return `<span class='ar-jsx-curly-brackets'>{{${_lineBreakSpaces}</span><span class="${_className}">${p1}</span><span class='ar-jsx-curly-brackets'>${_lineBreakSpaces}}}</span>`;
+            });
+            // Open Child Curly Bracket "{"
+            element = element.replace(/\[curly-bracket<\]/g, "<span class='ar-jsx-child-curly-bracket'>{</span>");
+            // Close Child Curly Bracket "}"
+            element = element.replace(/\[curly-bracket>\]/g, "<span class='ar-jsx-child-curly-bracket'>}</span>");
+            element = element.replace(/\[comma\]/g, "<span class='ar-jsx-comma'>,</span>");
+            if (this._code.current)
+                this._code.current.innerHTML += `<span class="ar-jsx-language">${element}</span>`;
+        });
+    };
+}
+export default Compiler;

package/dist/components/syntax-highlighter/classes/Parser.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+declare class Parser {
+    _setElements: React.Dispatch<React.SetStateAction<string[]>>;
+    private _lineBreakSpaces;
+    constructor(setElements: React.Dispatch<React.SetStateAction<string[]>>);
+    JsxToString: (child: React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>>, subChilde?: boolean, indentLevel?: number) => string | undefined;
+    private HandleEntries;
+    private FormatAttributeValue;
+}
+export default Parser;

package/dist/components/syntax-highlighter/classes/Parser.js

@@ -0,0 +1,89 @@
+import React from "react";
+class Parser {
+    // Public
+    _setElements;
+    // Private
+    _lineBreakSpaces = 4;
+    constructor(setElements) {
+        this._setElements = setElements;
+    }
+    JsxToString = (child, subChilde = false, indentLevel = 0) => {
+        if (!child)
+            return;
+        const componentType = typeof child.type === "function" ? child.type.name : child.type;
+        let componentContent = child.props.children;
+        // İndent seviyesi için boşlukları ekle.
+        const indent = "  ".repeat(indentLevel);
+        // Eğer `br` elementi ise işlemi sonlandır
+        if (componentType === "br")
+            return;
+        const attributes = Object.keys(child.props).filter((key) => key !== "children");
+        const attributesLength = attributes.length;
+        const attributesList = attributes
+            .map((key) => this.FormatAttributeValue(key, child.props[key]))
+            .join(" ");
+        const formattedTag = componentType[0].toUpperCase() === componentType[0]
+            ? `[react-tag]${componentType}[/react-tag]`
+            : componentType;
+        const formattedAttributes = attributesLength > 0 ? ` [attributes]${attributesList}[/attributes]` : "";
+        // Eğer gelen iç eleman bir nesneyse yeniden yapılan.
+        if (React.isValidElement(componentContent)) {
+            // İç içe tek bir çocuk eleman varsa recursive olarak işlemeye devam et
+            componentContent = `\n${this.JsxToString(componentContent, true, indentLevel + 1)}\n`;
+        }
+        else if (Array.isArray(componentContent)) {
+            // Eğer birden fazla çocuk varsa hepsini işle
+            componentContent = componentContent
+                .map((contentChild) => this.JsxToString(contentChild, true))
+                .join(`\n${indent}`);
+        }
+        else if (typeof componentContent === "string") {
+            // Eğer metin içeriği varsa, trimle
+            componentContent = componentContent.trim();
+        }
+        componentContent =
+            attributesLength >= this._lineBreakSpaces ? `\n  ${componentContent}\n` : componentContent;
+        const renderElement = componentContent
+            ? `${indent}[open]<[/open][tag]${formattedTag}[/tag]${formattedAttributes}[close]>[/close]${componentContent}${indent}[open]</[/open][tag]${formattedTag}[/tag][close]>[/close]`
+            : `${indent}[open]<[/open][tag]${formattedTag}[/tag]${formattedAttributes} [close]/>[/close]`;
+        !subChilde && this._setElements((prevElements) => [...prevElements, renderElement]);
+        return renderElement;
+    };
+    HandleEntries = (propValue) => {
+        if (propValue && typeof propValue === "object") {
+            return `[curly-bracket<] ${Object.entries(propValue)
+                .map(([key, value]) => `[attribute-key]${key}[/attribute-key][colon]:[/colon] ${this.HandleEntries(value)}`)
+                .join(", ")} [curly-bracket>]`;
+        }
+        return typeof propValue === "number"
+            ? `[number]${propValue}[/number]`
+            : `[string]${propValue}[/string]`;
+    };
+    FormatAttributeValue = (key, value) => {
+        let result = "";
+        switch (typeof value) {
+            case "number":
+                result = `[number]${value}[/number]`;
+                break;
+            case "string":
+                result = `[string]${value}[/string]`;
+                break;
+            case "boolean":
+                result = `[boolean]${value}[/boolean]`;
+                break;
+            case "object":
+                const entries = Object.entries(value)
+                    .map(([subKey, subValue]) => `[child-attribute][attribute-key]${subKey}[/attribute-key][colon]:[/colon] ${this.HandleEntries(subValue)}, [/child-attribute]`)
+                    .join("");
+                result = `[object]${entries}[/object]`;
+                break;
+            case "function":
+                result = `[function][/function]`;
+                break;
+            default:
+                return "";
+        }
+        return `[attribute][attribute-key]${key}[/attribute-key][equal]=[/equal]${result}[/attribute]`;
+    };
+}
+export default Parser;

package/dist/components/syntax-highlighter/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import "../../libs/styles/syntax-highlighter/syntax-highlighter.css";
+declare const SyntaxHighlighter: React.FC<{
+    children: React.ReactNode;
+}>;
+export default SyntaxHighlighter;

package/dist/components/syntax-highlighter/index.js

@@ -0,0 +1,37 @@
+import React, { useEffect, useRef, useState } from "react";
+import "../../libs/styles/syntax-highlighter/syntax-highlighter.css";
+import Parser from "./classes/Parser";
+import Compiler from "./classes/Compiler";
+const SyntaxHighlighter = ({ children }) => {
+    // refs
+    const _div = useRef(null);
+    const _code = useRef(null);
+    // states
+    const [elements, setElements] = useState([]);
+    // classes
+    const parser = new Parser(setElements);
+    const compiler = new Compiler(_code);
+    // useEffects
+    useEffect(() => {
+        // Clear...
+        setElements([]);
+        if (_code.current)
+            _code.current.innerHTML = "";
+        // Fill...
+        React.Children.forEach(children, (child) => {
+            if (React.isValidElement(child))
+                parser.JsxToString(child);
+        });
+    }, [children]);
+    useEffect(() => {
+        if (elements.length === 0)
+            return;
+        compiler.Jsx(elements);
+    }, [elements]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "ar-syntax" },
+            React.createElement("div", { ref: _div, className: "preview" }, children),
+            React.createElement("pre", { className: "pre" },
+                React.createElement("code", { ref: _code })))));
+};
+export default SyntaxHighlighter;

package/dist/components/typography/Paragraph.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare const Paragraph: React.FC<{
+    children: string;
+    align?: "left" | "center" | "right";
+    upperCase?: boolean;
+}>;
+export default Paragraph;

package/dist/components/typography/Paragraph.js

@@ -0,0 +1,9 @@
+import React, { useRef } from "react";
+const Paragraph = ({ children, align = "left", upperCase = false, }) => {
+    // refs
+    let _className = useRef("ar-typography-paragraph").current;
+    if (align)
+        _className += ` ${align}`;
+    return React.createElement("p", { className: _className }, upperCase ? children.toLocaleUpperCase() : children);
+};
+export default Paragraph;

package/dist/components/typography/Title.d.ts

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

package/dist/components/typography/Title.js

@@ -0,0 +1,11 @@
+import React, { useRef } from "react";
+const Title = ({ children, Level, align = "left", size, upperCase = false }) => {
+    // refs
+    let _className = useRef("ar-typography-title").current;
+    if (align)
+        _className += ` ${align}`;
+    if (size)
+        _className += ` ${size}`;
+    return React.createElement(Level, { className: _className }, upperCase ? children.toLocaleUpperCase() : children);
+};
+export default Title;

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

@@ -0,0 +1,7 @@
+export type TitleProps = {
+    children: string;
+    Level: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    align?: "left" | "center" | "right";
+    size?: "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large" | "xx-large" | "xxx-large" | "smaller" | "larger";
+    upperCase?: boolean;
+};

package/dist/components/typography/Types.js

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

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

@@ -0,0 +1,10 @@
+import "../../libs/styles/typography/typography.css";
+declare const Typography: {
+    Title: import("react").FC<import("./Types").TitleProps>;
+    Paragraph: import("react").FC<{
+        children: string;
+        align?: "left" | "center" | "right";
+        upperCase?: boolean;
+    }>;
+};
+export default Typography;

package/dist/components/typography/index.js

@@ -0,0 +1,9 @@
+import Paragraph from "./Paragraph";
+import Title from "./Title";
+import "../../libs/styles/typography/typography.css";
+// @@Export
+const Typography = {
+    Title,
+    Paragraph,
+};
+export default Typography;

package/dist/index.d.ts

@@ -1,9 +1,13 @@
 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 Typography from "./components/typography";
+export { Typography };
+import SyntaxHighlighter from "./components/syntax-highlighter";
+export { SyntaxHighlighter };
+import Divider from "./components/divider";
+export { Divider };
 import type { MenuProps } from "./components/menu/Types";
 export type { MenuProps };

package/dist/index.js

@@ -1,7 +1,11 @@
 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 Typography from "./components/typography";
+export { Typography };
+import SyntaxHighlighter from "./components/syntax-highlighter";
+export { SyntaxHighlighter };
+import Divider from "./components/divider";
+export { Divider };

package/dist/libs/styles/ar-core.css

@@ -25,15 +25,12 @@
   --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;
@@ -41,19 +38,30 @@
   --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); */
+}
+
+/* Code Editor */
+:root {
+  --bg-color: #282c34;
+  --color: #abb2bf;
+  --tag-color: #679ad1;
+  --custom-tag-color: #6fc2ae;
+  --attribute-key-color: #a9d9f9;
+  --string-value-color: #c5947c;
+  --number-value-color: #bacdab;
+  --boolean-value-color: #57b0fe;
+  --object-value-color: #57b0fe;
+  --curly-bracket-color: #e4e49c;
+  --child-curly-bracket-color: #df6ed2;
 }
 /* #endregion */
 /* Color Palette */

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

@@ -1,15 +1,7 @@
 .ar-button.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;
+  width: 2rem;
+  height: 2rem;
   padding: 0 !important;
 }
 .ar-button.ar-button-shape.circle {

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

@@ -16,7 +16,6 @@
   margin-left: 0.5rem;
   padding-left: 0.5rem;
 }
-
 .ar-menu > .ar-menu-list {
   display: flex;
 }
@@ -24,7 +23,6 @@
   display: flex;
   align-items: center;
   height: 2.5rem;
-  border-radius: var(--border-radius-lg);
   padding-left: 1rem;
   user-select: none;
 }

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

@@ -1,13 +1,18 @@
 .ar-menu .ar-menu-list-item.selected {
   background-color: rgba(var(--black-rgb), 0.03) !important;
+  border-top-left-radius: var(--border-radius-lg);
+  border-bottom-left-radius: var(--border-radius-lg);
 }
+
 /* SubMenu */
 .ar-menu .ar-menu-list-item-group-item.selected {
   background-color: rgba(var(--black-rgb), 0.03) !important;
-  /* margin-top: 1rem; */
-  border-radius: var(--border-radius-lg);
+  border-top-left-radius: var(--border-radius-lg);
+  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);
 }

package/dist/libs/styles/syntax-highlighter/core/core.css

@@ -0,0 +1,20 @@
+.ar-syntax {
+  border-radius: var(--border-radius-lg);
+  box-shadow: 0 0 15px 5px rgba(var(--black-rgb), 0.25);
+  overflow: hidden;
+}
+.ar-syntax > .preview {
+  background-color: var(--white);
+  padding: 1rem;
+}
+.ar-syntax > .pre {
+  background-color: var(--bg-color);
+  margin: 0;
+  padding: 1rem;
+  overflow-x: auto;
+}
+.ar-syntax > .pre > code {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem 0;
+}

package/dist/libs/styles/syntax-highlighter/core/jsx.template.css

@@ -0,0 +1,65 @@
+.ar-jsx-language {
+  color: var(--color);
+}
+.ar-jsx-language > .ar-jsx-tag {
+  color: var(--tag-color);
+}
+.ar-jsx-language > .ar-jsx-tag > .ar-jsx-custom-tag {
+  color: var(--custom-tag-color);
+}
+
+.ar-jsx-language > .ar-jsx-attributes > .ar-jsx-attribute {
+}
+.ar-jsx-language > .ar-jsx-attributes > .ar-jsx-attribute > .ar-jsx-curly-brackets {
+  color: var(--curly-bracket-color);
+}
+.ar-jsx-language > .ar-jsx-attributes > .ar-jsx-attribute > span:not([class]) {
+}
+.ar-jsx-language > .ar-jsx-attributes.type-column,
+.ar-jsx-language > .ar-jsx-attributes .ar-jsx-object-value.type-column {
+  display: flex;
+  flex-direction: column;
+  margin-left: 1rem;
+}
+
+.ar-jsx-language > .ar-jsx-attributes .ar-jsx-attribute-key {
+  color: var(--attribute-key-color);
+}
+
+/* String Value */
+.ar-jsx-language > .ar-jsx-attributes .ar-jsx-string-value {
+  color: var(--string-value-color);
+}
+.ar-jsx-language > .ar-jsx-attributes .ar-jsx-number-value {
+  color: var(--number-value-color);
+}
+
+/* Boolean Value */
+.ar-jsx-language > .ar-jsx-attributes .ar-jsx-boolean-value {
+  color: var(--boolean-value-color);
+}
+.ar-jsx-language > .ar-jsx-attributes .ar-jsx-boolean-value > span:not([class]) {
+  color: var(--curly-bracket-color);
+}
+
+/* Object Value */
+.ar-jsx-language > .ar-jsx-attributes .ar-jsx-object-value {
+  color: var(--object-value-color);
+}
+.ar-jsx-language > .ar-jsx-attributes .ar-jsx-object-value > .ar-jsx-comma {
+  color: var(--object-value-color);
+}
+
+.ar-jsx-language
+  > .ar-jsx-attributes
+  .ar-jsx-object-value
+  > .ar-jsx-attribute
+  > .ar-jsx-child-curly-bracket {
+  color: var(--child-curly-bracket-color);
+}
+.ar-jsx-language > .ar-jsx-attributes .ar-jsx-object-value.type-column {
+  /* background-color: black;
+  width: fit-content;
+  padding: 0.5rem;
+  border-radius: var(--border-radius-lg); */
+}

package/dist/libs/styles/syntax-highlighter/syntax-highlighter.css

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

package/dist/libs/styles/typography/paragraph/align.css

@@ -0,0 +1,9 @@
+.ar-typography-paragraph.left {
+  text-align: left;
+}
+.ar-typography-paragraph.center {
+  text-align: center;
+}
+.ar-typography-paragraph.right {
+  text-align: right;
+}

package/dist/libs/styles/typography/title/align.css

@@ -0,0 +1,9 @@
+.ar-typography-title.left {
+  text-align: left;
+}
+.ar-typography-title.center {
+  text-align: center;
+}
+.ar-typography-title.right {
+  text-align: right;
+}

package/dist/libs/styles/typography/title/size.css

@@ -0,0 +1,31 @@
+.ar-typography-title.xx-small {
+  font-size: 0.8rem; /* 12.8px (0.8 * 16) */
+}
+.ar-typography-title.x-small {
+  font-size: 1rem; /* 16px */
+}
+.ar-typography-title.small {
+  font-size: 1.3rem; /* 20.8px (1.3 * 16) */
+}
+.ar-typography-title.medium {
+  font-size: 1.6rem; /* 25.6px (1.6 * 16) */
+}
+.ar-typography-title.large {
+  font-size: 2rem; /* 32px (2 * 16) */
+}
+.ar-typography-title.x-large {
+  font-size: 2.5rem; /* 40px (2.5 * 16) */
+}
+.ar-typography-title.xx-large {
+  font-size: 3rem; /* 48px (3 * 16) */
+}
+.ar-typography-title.xxx-large {
+  font-size: 4rem; /* 64px (4 * 16) */
+}
+
+.ar-typography-title.smaller {
+  font-size: smaller;
+}
+.ar-typography-title.larger {
+  font-size: larger;
+}

package/dist/libs/styles/typography/typography.css

@@ -0,0 +1,3 @@
+@import url("./title/align.css");
+@import url("./title/size.css");
+@import url("./paragraph/align.css");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ar-design",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -8,10 +8,16 @@
     "dist"
   ],
   "scripts": {
-    "build": "rm -rf dist/ && npm run build:esm && npm run build:post-mac",
+    "build": "rm -rf dist/ && npm run build:post-mac && npm run build:esm",
+    "build:post-mac": "npm run mkdir:esm && npm run copy:esm",
+    "mkdir:esm": "mkdir -p dist/libs/styles",
+    "copy:esm": "cp -r ./src/libs/styles dist/libs/",
     "build:esm": "tsc",
+    "mv:esm": "for ext in js ts; do mv ./dist/esm/*.$ext ./dist/; done",
+    "mkdir:cjs": "mkdir -p dist/cjs/libs/styles",
+    "copy:cjs": "cp -r ./src/libs/styles dist/cjs/libs/",
     "build:cjs": "tsc --module commonjs --outdir dist/cjs",
-    "build:post-mac": "mkdir -p dist/libs/styles && cp -r ./src/libs/styles dist/libs/"
+    "mv:cjs": "for ext in js ts; do mv ./dist/cjs/*.$ext ./dist/; done"
   },
   "repository": {
     "type": "git",