@yakad/ui 1.1.2 → 1.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yakad/ui",
-    "version": "1.1.2",
+    "version": "1.1.4",
     "description": "",
     "main": "./src/index.js",
     "scripts": {
@@ -20,7 +20,7 @@
     "dependencies": {
         "@types/react": "^18.0.24",
         "@types/react-dom": "^18.0.6",
-        "@yakad/lib": "^1.0.1",
+        "@yakad/lib": "^1.0.3",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.4.2",

package/appBar/appBar.module.css

@@ -1,14 +0,0 @@
-.header {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    box-sizing: border-box;
-    width: 100%;
-    height: 5rem;
-    padding: 0 2rem;
-    border-bottom: 0.1rem solid #7d7d7d40;
-    background: var(--headerColor);
-    color: var(--onHeaderColor);
-    fill: var(--onHeaderColor);
-    user-select: none;
-}

package/appBar/appBar.tsx

@@ -1,15 +0,0 @@
-import React from "react";
-import { joinClassNames, joinStyles } from "@yakad/lib";
-import styles from "./appBar.module.css";
-
-function AppBar(props: React.HTMLAttributes<HTMLElement>) {
-  const joinedClassNames = joinClassNames(styles.header, props.className!);
-
-  return (
-    <header {...props} className={joinedClassNames}>
-      {props.children}
-    </header>
-  );
-}
-
-export default AppBar;

package/card/card.module.css

@@ -1,12 +0,0 @@
-.card {
-    width: 100%;
-    padding: 3rem;
-    box-sizing: border-box;
-    border-radius: 2rem;
-    background: var(--surfaceColor);
-    color: var(--onSurfaceColor);
-    fill: var(--onSurfaceColor);
-    box-shadow: 0px 6px 10px 0px hsla(0, 0%, 0%, 0.14),
-        0px 1px 18px 0px hsla(0, 0%, 0%, 0.12),
-        0px 3px 5px -1px hsla(0, 0%, 0%, 0.2);
-}

package/card/card.tsx

@@ -1,15 +0,0 @@
-import React from "react";
-import { joinClassNames } from "@yakad/lib";
-import styles from "./card.module.css";
-
-function Card(props: React.HTMLAttributes<HTMLElement>) {
-  const joinedClassNames = joinClassNames(styles.card, props.className!);
-
-  return (
-    <div {...props} className={joinedClassNames}>
-      {props.children}
-    </div>
-  );
-}
-
-export default Card;

package/clickAwayListener/clickAwayListener.tsx

@@ -1,27 +0,0 @@
-import React, { useEffect, useRef } from "react";
-
-interface ClickAwayListenerProps extends React.HTMLAttributes<HTMLDivElement> {
-    onClickAway: React.MouseEventHandler<HTMLDivElement>;
-}
-
-function ClickAwayListener(props: ClickAwayListenerProps) {
-    const ref = useRef(null);
-
-    useEffect(() => {
-        const handleOutSideClick = (event: MouseEvent) => {
-            if (ref.current && !(ref.current as any).contains(event.target)) {
-                props.onClickAway && props.onClickAway(event as any);
-            }
-        };
-
-        document.addEventListener("click", handleOutSideClick, true);
-
-        // CleanUp When element unmount
-        return () =>
-            document.removeEventListener("click", handleOutSideClick, true);
-    }, [props.onClickAway]);
-
-    return <div ref={ref}>{props.children}</div>;
-}
-
-export default ClickAwayListener;

package/container/container.module.css

@@ -1,23 +0,0 @@
-div.container {
-    display: flex;
-    flex-direction: inherit;
-    width: 100%;
-    margin: auto;
-    box-sizing: border-box;
-}
-
-div.container.xs {
-    max-width: 44.4rem;
-}
-div.container.sm {
-    max-width: 60rem;
-}
-div.container.md {
-    max-width: 90rem;
-}
-div.container.lg {
-    max-width: 120rem;
-}
-div.container.xl {
-    max-width: 150rem;
-}

package/container/container.tsx

@@ -1,25 +0,0 @@
-import React from "react";
-import { joinClassNames, joinStyles } from "@yakad/lib";
-import styles from "./container.module.css";
-
-type ScreenSize = "xs" | "sm" | "md" | "lg" | "xl";
-
-interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
-  maxWidth?: ScreenSize;
-}
-
-function Container(props: ContainerProps) {
-  const joinedClassNames = joinClassNames(
-    props.maxWidth ? styles[props.maxWidth] : "",
-    styles.container,
-    props.className!
-  );
-
-  return (
-    <div {...props} className={joinedClassNames}>
-      {props.children}
-    </div>
-  );
-}
-
-export default Container;

package/footer/footer.module.css

@@ -1,6 +0,0 @@
-.footer {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    box-sizing: border-box;
-}

package/footer/footer.tsx

@@ -1,15 +0,0 @@
-import React from "react";
-import { joinClassNames } from "@yakad/lib";
-import styles from "./footer.module.css";
-
-function Footer(props: React.HTMLAttributes<HTMLElement>) {
-  const joinedClassNames = joinClassNames(styles.footer, props.className!);
-
-  return (
-    <footer {...props} className={joinedClassNames}>
-      {props.children}
-    </footer>
-  );
-}
-
-export default Footer;

package/form/form.module.css

@@ -1,6 +0,0 @@
-.form {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-    width: 100%;
-}

package/form/form.tsx

@@ -1,23 +0,0 @@
-import React from "react";
-import { joinClassNames, joinStyles } from "@yakad/lib";
-import styles from "./form.module.css";
-
-function Form(props: React.HTMLAttributes<HTMLFormElement>) {
-  const joinedClassNames = joinClassNames(styles.form, props.className!);
-
-  return (
-    <form
-      {...props}
-      className={joinedClassNames}
-      onSubmit={(e) => {
-        e.preventDefault();
-
-        props.onSubmit!(null as any);
-      }}
-    >
-      {props.children}
-    </form>
-  );
-}
-
-export default Form;

package/gridContainer/gridContainer.module.css

@@ -1,5 +0,0 @@
-.gridcontainer {
-    display: grid;
-    box-sizing: border-box;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-}

package/gridContainer/gridContainer.tsx

@@ -1,28 +0,0 @@
-import React from "react";
-import { joinClassNames, joinStyles } from "@yakad/lib";
-import styles from "./gridContainer.module.css";
-
-interface GridContainerProps extends React.HTMLAttributes<HTMLDivElement> {
-    rowGap?: number;
-    columnGap?: number;
-}
-
-// Custom Button Element
-function GridContainer(props: GridContainerProps) {
-    const joinedClassNames = joinClassNames(
-        styles.gridcontainer,
-        props.className!
-    );
-    const joinedStyles = joinStyles(
-        { columnGap: props.columnGap ? props.columnGap + "rem" : "1.5rem" },
-        { rowGap: props.rowGap ? props.rowGap + "rem" : "1.5rem" },
-        props.style!
-    );
-    return (
-        <div {...props} className={joinedClassNames} style={joinedStyles}>
-            {props.children}
-        </div>
-    );
-}
-
-export default GridContainer;

package/gridItem/gridItem.module.css

@@ -1,192 +0,0 @@
-.xl1 {
-    grid-column: span 1;
-}
-.xl2 {
-    grid-column: span 2;
-}
-.xl3 {
-    grid-column: span 3;
-}
-.xl4 {
-    grid-column: span 4;
-}
-.xl5 {
-    grid-column: span 5;
-}
-.xl6 {
-    grid-column: span 6;
-}
-.xl7 {
-    grid-column: span 7;
-}
-.xl8 {
-    grid-column: span 8;
-}
-.xl9 {
-    grid-column: span 9;
-}
-.xl10 {
-    grid-column: span 10;
-}
-.xl11 {
-    grid-column: span 11;
-}
-.xl12 {
-    grid-column: span 12;
-}
-
-@media screen and (max-width: 1200px) {
-    .lg1 {
-        grid-column: span 1;
-    }
-    .lg2 {
-        grid-column: span 2;
-    }
-    .lg3 {
-        grid-column: span 3;
-    }
-    .lg4 {
-        grid-column: span 4;
-    }
-    .lg5 {
-        grid-column: span 5;
-    }
-    .lg6 {
-        grid-column: span 6;
-    }
-    .lg7 {
-        grid-column: span 7;
-    }
-    .lg8 {
-        grid-column: span 8;
-    }
-    .lg9 {
-        grid-column: span 9;
-    }
-    .lg10 {
-        grid-column: span 10;
-    }
-    .lg11 {
-        grid-column: span 11;
-    }
-    .lg12 {
-        grid-column: span 12;
-    }
-}
-
-@media screen and (max-width: 900px) {
-    .md1 {
-        grid-column: span 1;
-    }
-    .md2 {
-        grid-column: span 2;
-    }
-    .md3 {
-        grid-column: span 3;
-    }
-    .md4 {
-        grid-column: span 4;
-    }
-    .md5 {
-        grid-column: span 5;
-    }
-    .md6 {
-        grid-column: span 6;
-    }
-    .md7 {
-        grid-column: span 7;
-    }
-    .md8 {
-        grid-column: span 8;
-    }
-    .md9 {
-        grid-column: span 9;
-    }
-    .md10 {
-        grid-column: span 10;
-    }
-    .md11 {
-        grid-column: span 11;
-    }
-    .md12 {
-        grid-column: span 12;
-    }
-}
-
-@media screen and (max-width: 600px) {
-    .sm1 {
-        grid-column: span 1;
-    }
-    .sm2 {
-        grid-column: span 2;
-    }
-    .sm3 {
-        grid-column: span 3;
-    }
-    .sm4 {
-        grid-column: span 4;
-    }
-    .sm5 {
-        grid-column: span 5;
-    }
-    .sm6 {
-        grid-column: span 6;
-    }
-    .sm7 {
-        grid-column: span 7;
-    }
-    .sm8 {
-        grid-column: span 8;
-    }
-    .sm9 {
-        grid-column: span 9;
-    }
-    .sm10 {
-        grid-column: span 10;
-    }
-    .sm11 {
-        grid-column: span 11;
-    }
-    .sm12 {
-        grid-column: span 12;
-    }
-}
-
-@media screen and (max-width: 444px) {
-    .xs1 {
-        grid-column: span 1;
-    }
-    .xs2 {
-        grid-column: span 2;
-    }
-    .xs3 {
-        grid-column: span 3;
-    }
-    .xs4 {
-        grid-column: span 4;
-    }
-    .xs5 {
-        grid-column: span 5;
-    }
-    .xs6 {
-        grid-column: span 6;
-    }
-    .xs7 {
-        grid-column: span 7;
-    }
-    .xs8 {
-        grid-column: span 8;
-    }
-    .xs9 {
-        grid-column: span 9;
-    }
-    .xs10 {
-        grid-column: span 10;
-    }
-    .xs11 {
-        grid-column: span 11;
-    }
-    .xs12 {
-        grid-column: span 12;
-    }
-}

package/gridItem/gridItem.tsx

@@ -1,31 +0,0 @@
-import React from "react";
-import { joinClassNames, joinStyles } from "@yakad/lib";
-import styles from "./gridItem.module.css";
-
-interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {
-    xs?: number;
-    sm?: number;
-    md?: number;
-    lg?: number;
-    xl?: number;
-}
-
-// Custom Button Element
-function GridItem(props: GridItemProps) {
-    const joinedClassNames = joinClassNames(
-        props.xl ? styles["xl" + props.xl] : "",
-        props.lg ? styles["lg" + props.lg] : "",
-        props.md ? styles["md" + props.md] : "",
-        props.md ? styles["sm" + props.md] : "",
-        props.md ? styles["xs" + props.md] : "",
-        props.className!
-    );
-
-    return (
-        <div {...props} className={joinedClassNames}>
-            {props.children}
-        </div>
-    );
-}
-
-export default GridItem;

package/historyBack/historyBack.tsx

@@ -1,20 +0,0 @@
-import React from "react";
-import { useNavigate } from "react-router-dom";
-
-function HistoryBack(props: React.HTMLAttributes<HTMLDivElement>) {
-    const navigate = useNavigate();
-
-    return (
-        <div
-            {...props}
-            onClick={() => {
-                navigate(-1);
-                props.onClick!(null as any);
-            }}
-        >
-            {props.children}
-        </div>
-    );
-}
-
-export default HistoryBack;

package/hr/hr.module.css

@@ -1,18 +0,0 @@
-.hr {
-    width: calc(100% - 1rem);
-    height: 0;
-    padding: 0;
-    margin: 0.5rem auto;
-    background: none;
-    border-top: 0.1rem solid var(--secondaryVariantColor);
-}
-.dotted {
-    border-top: 0.4rem dotted var(--secondaryVariantColor);
-}
-.dashed {
-    border-top: 0.2rem dashed var(--secondaryVariantColor);
-}
-.shortLine {
-    width: 30rem;
-    max-width: 80%;
-}

package/hr/hr.tsx

@@ -1,32 +0,0 @@
-import React from "react";
-import { joinClassNames, joinStyles } from "@yakad/lib";
-import styles from "./hr.module.css";
-
-interface HrProps extends React.HTMLAttributes<HTMLElement> {
-  variant?: "dotted" | "dashed" | "shortLine";
-  height?: number;
-  marginTopBottom?: number;
-}
-
-function Hr(props: HrProps) {
-  const joinedClassNames = joinClassNames(
-    styles.hr,
-    props.variant ? styles[props.variant] : "",
-    props.className!
-  );
-
-  const joinedStyles = joinStyles(
-    props.height ? { borderTopWidth: props.height + "rem" } : {},
-    props.marginTopBottom
-      ? joinStyles(
-          { marginTop: props.marginTopBottom + "rem" },
-          { marginBottom: props.marginTopBottom + "rem" }
-        )
-      : {},
-    props.style!
-  );
-
-  return <hr {...props} className={joinedClassNames} style={joinedStyles}></hr>;
-}
-
-export default Hr;

package/list/list.module.css

@@ -1,22 +0,0 @@
-.list {
-    display: flex;
-    list-style-type: none;
-    max-height: 100rem;
-    padding: 0;
-    transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-}
-
-.row {
-    flex-direction: row;
-}
-.column {
-    flex-direction: column;
-    align-items: stretch;
-    width: 100%;
-    box-sizing: border-box;
-}
-
-.collapsed {
-    max-height: 0;
-    overflow: hidden;
-}

package/list/list.tsx

@@ -1,25 +0,0 @@
-import React from "react";
-import { joinClassNames } from "@yakad/lib";
-import styles from "./list.module.css";
-
-interface ListProps extends React.HTMLAttributes<HTMLUListElement> {
-  direction?: "row" | "column";
-  collapsed?: boolean;
-}
-
-function List(props: ListProps) {
-  const joinedClassNames = joinClassNames(
-    styles.list,
-    props.direction ? styles[props.direction] : styles.row,
-    props.collapsed ? styles.collapsed : "",
-    props.className!
-  );
-
-  return (
-    <ul {...props} className={joinedClassNames}>
-      {props.children}
-    </ul>
-  );
-}
-
-export default List;

package/listItem/listItem.module.css

@@ -1,6 +0,0 @@
-.listItem {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    box-sizing: border-box;
-}

package/listItem/listItem.tsx

@@ -1,12 +0,0 @@
-import React from "react";
-import styles from "./listItem.module.css";
-
-function ListItem(props: React.HTMLAttributes<HTMLLIElement>) {
-  return (
-    <li className={styles.listItem} {...props}>
-      {props.children}
-    </li>
-  );
-}
-
-export default ListItem;

package/main/main.module.css

@@ -1,19 +0,0 @@
-.main {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-self: flex-end;
-    box-sizing: border-box;
-    width: 100%;
-    transition: width 0.3s;
-}
-
-.navOpen {
-    width: calc(100% - 22rem);
-}
-
-@media screen and (max-width: 1000px) {
-    .navOpen {
-        width: 100%;
-    }
-}

package/main/main.tsx

@@ -1,25 +0,0 @@
-import React from "react";
-import { joinClassNames, joinStyles } from "@yakad/lib";
-import styles from "./main.module.css";
-
-interface MainProps extends React.HTMLAttributes<HTMLDivElement> {
-  navOpen?: boolean;
-}
-
-function Main(props: MainProps) {
-  const navOpenClass = props.navOpen ? styles.navOpen : "";
-
-  const joinedClassNames = joinClassNames(
-    styles.main,
-    navOpenClass,
-    props.className!
-  );
-
-  return (
-    <main {...props} className={joinedClassNames}>
-      {props.children}
-    </main>
-  );
-}
-
-export default Main;

package/navigation/navigation.module.css

@@ -1,56 +0,0 @@
-.navigation {
-    position: fixed;
-    max-width: 100%;
-    transition: transform 0.3s;
-    background: var(--backgroundColor);
-    overflow-y: auto;
-}
-
-.auto,
-.left {
-    top: 5.1rem;
-    left: 0;
-    width: 21.9rem;
-    height: calc(100% - 5.1rem);
-    max-height: 100%;
-    border-inline-end: 0.2rem solid #7d7d7d40;
-    transform: translate(-100%, 0);
-}
-[dir="rtl"] .auto,
-.right {
-    right: 0;
-    top: 5.1rem;
-    width: 21.9rem;
-    height: calc(100% - 5.1rem);
-    max-height: 100%;
-    border-inline-end: 0.2rem solid #7d7d7d40;
-    transform: translate(100%, 0);
-}
-
-.top {
-    top: 0;
-    width: 100%;
-    height: auto;
-    border-bottom: 0.2rem solid #7d7d7d40;
-    transform: translate(0, -100%);
-}
-.bottom {
-    bottom: 0;
-    width: 100%;
-    height: auto;
-    border-top: 0.2rem solid #7d7d7d40;
-    transform: translate(0, 100%);
-}
-
-.open {
-    transform: translate(0, 0);
-}
-
-@media screen and (max-width: 1000px) {
-    .auto,
-    .left,
-    .right {
-        top: 0;
-        height: 100%;
-    }
-}

package/navigation/navigation.tsx

@@ -1,24 +0,0 @@
-import React from "react";
-import { joinClassNames } from "@yakad/lib";
-import styles from "./navigation.module.css";
-
-interface NavigationProps extends React.HTMLAttributes<HTMLElement> {
-  anchor?: "left" | "right" | "top" | "bottom" | "auto";
-  open: boolean;
-}
-
-function Navigation(props: NavigationProps) {
-  const joinedClassNames = joinClassNames(
-    styles.navigation,
-    props.anchor ? styles[props.anchor] : styles.auto,
-    props.open ? styles.open : ""
-  );
-
-  return (
-    <nav {...props} className={joinedClassNames}>
-      {props.children}
-    </nav>
-  );
-}
-
-export default Navigation;

package/page/page.module.css

@@ -1,9 +0,0 @@
-.page {
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-    width: 100%;
-    background: var(--backgroundColor);
-    color: var(--onBackgroundColor);
-    fill: var(--onBackgroundColor);
-}

package/page/page.tsx

@@ -1,15 +0,0 @@
-import React from "react";
-import { joinClassNames, joinStyles } from "@yakad/lib";
-import styles from "./page.module.css";
-
-function Page(props: React.HTMLAttributes<HTMLDivElement>) {
-  const joinedClassNames = joinClassNames(styles.page, props.className!);
-
-  return (
-    <div {...props} className={joinedClassNames}>
-      {props.children}
-    </div>
-  );
-}
-
-export default Page;

package/row/row.module.css

@@ -1,7 +0,0 @@
-.row {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 1.5rem;
-    box-sizing: border-box;
-}

package/row/row.tsx

@@ -1,15 +0,0 @@
-import React from "react";
-import { joinClassNames, joinStyles } from "@yakad/lib";
-import styles from "./row.module.css";
-
-function Row(props: React.HTMLAttributes<HTMLDivElement>) {
-  const joinedClassNames = joinClassNames(styles.row, props.className!);
-
-  return (
-    <div {...props} className={joinedClassNames}>
-      {props.children}
-    </div>
-  );
-}
-
-export default Row;

package/spacer/spacer.module.css

@@ -1,5 +0,0 @@
-.spacer {
-    width: 0;
-    height: 100%;
-    margin: auto;
-}

package/spacer/spacer.tsx

@@ -1,8 +0,0 @@
-import React from "react";
-import styles from "./spacer.module.css";
-
-function Spacer() {
-    return <div className={styles.spacer}></div>;
-}
-
-export default Spacer;

package/stack/stack.module.css

@@ -1,6 +0,0 @@
-.stack {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-    box-sizing: border-box;
-}

package/stack/stack.tsx

@@ -1,15 +0,0 @@
-import React from "react";
-import { joinClassNames, joinStyles } from "@yakad/lib";
-import styles from "./stack.module.css";
-
-function Stack(props: React.HTMLAttributes<HTMLDivElement>) {
-  const joinedClassNames = joinClassNames(styles.stack, props.className!);
-
-  return (
-    <div {...props} className={joinedClassNames}>
-      {props.children}
-    </div>
-  );
-}
-
-export default Stack;

package/svgIcon/svgIcon.module.css

@@ -1,5 +0,0 @@
-.svg svg {
-    display: block;
-    width: 100%;
-    height: 100%;
-}

package/svgIcon/svgIcon.tsx

@@ -1,26 +0,0 @@
-import React from "react";
-import { joinClassNames, joinStyles } from "@yakad/lib";
-import styles from "./svgIcon.module.css";
-
-interface SvgIconProps extends React.HTMLAttributes<HTMLElement> {
-    size?: number;
-}
-
-function SvgIcon(props: SvgIconProps) {
-    const joinedClassNames = joinClassNames(styles.svg, props.className!);
-
-    const joinedStyles = joinStyles(
-        props.size
-            ? { width: props.size + "rem", height: props.size + "rem" }
-            : {},
-        props.style!
-    );
-
-    return (
-        <div {...props} className={joinedClassNames} style={joinedStyles}>
-            {props.children}
-        </div>
-    );
-}
-
-export default SvgIcon;