@yakad/ui 1.1.6 → 1.2.1

package/appBar/appBar.module.css

@@ -0,0 +1,14 @@
+.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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,12 @@
+.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

@@ -0,0 +1,15 @@
+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/container/container.module.css

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,25 @@
+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

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

package/footer/footer.tsx

@@ -0,0 +1,15 @@
+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

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

package/form/form.tsx

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,5 @@
+.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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,192 @@
+.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

@@ -0,0 +1,31 @@
+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/hr/hr.module.css

@@ -0,0 +1,18 @@
+.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

@@ -0,0 +1,32 @@
+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/index.tsx

@@ -1,3 +1,39 @@
 import Button from "./button/button";
+import AppBar from "./appBar/appBar";
+import Card from "./card/card";
+import Container from "./container/container";
+import Footer from "./footer/footer";
+import Form from "./form/form";
+import GridContainer from "./gridContainer/gridContainer";
+import GridItem from "./gridItem/gridItem";
+import Hr from "./hr/hr";
+import List from "./list/list";
+import ListItem from "./listItem/listItem";
+import Main from "./main/main";
+import Navigation from "./navigation/navigation";
+import Page from "./page/page";
+import Row from "./row/row";
+import Spacer from "./spacer/spacer";
+import Stack from "./stack/stack";
+import SvgIcon from "./svgIcon/svgIcon";
 
-export { Button };
+export {
+    Button,
+    AppBar,
+    Card,
+    Container,
+    Footer,
+    Form,
+    GridContainer,
+    GridItem,
+    Hr,
+    List,
+    ListItem,
+    Main,
+    Navigation,
+    Page,
+    Row,
+    Stack,
+    Spacer,
+    SvgIcon,
+};

package/list/list.module.css

@@ -0,0 +1,22 @@
+.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

@@ -0,0 +1,25 @@
+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

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

package/listItem/listItem.tsx

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,19 @@
+.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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,56 @@
+.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

@@ -0,0 +1,24 @@
+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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yakad/ui",
-    "version": "1.1.6",
+    "version": "1.2.1",
     "description": "",
     "main": "./src/index.js",
     "scripts": {

package/page/page.module.css

@@ -0,0 +1,9 @@
+.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

@@ -0,0 +1,15 @@
+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

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

package/row/row.tsx

@@ -0,0 +1,15 @@
+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

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

package/spacer/spacer.tsx

@@ -0,0 +1,8 @@
+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

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

package/stack/stack.tsx

@@ -0,0 +1,15 @@
+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;