@yakad/ui 1.0.0 → 1.0.2

package/src/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/src/form/form.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare function Form(props: React.HTMLAttributes<HTMLFormElement>): JSX.Element;
+export default Form;

package/src/form/form.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { joinClassNames } from "@yakad/lib";
+import styles from "./form.module.css";
+function Form(props) {
+    const joinedClassNames = joinClassNames(styles.form, props.className);
+    return (React.createElement("form", { ...props, className: joinedClassNames, onSubmit: (e) => {
+            e.preventDefault();
+            props.onSubmit(null);
+        } }, props.children));
+}
+export default Form;
+//# sourceMappingURL=form.js.map

package/src/form/form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.js","sourceRoot":"","sources":["form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAc,MAAM,YAAY,CAAC;AACxD,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,SAAS,IAAI,CAAC,KAA4C;IACxD,MAAM,gBAAgB,GAAG,cAAc,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,SAAU,CAAC,CAAC;IAEvE,OAAO,CACL,iCACM,KAAK,EACT,SAAS,EAAE,gBAAgB,EAC3B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;YACd,CAAC,CAAC,cAAc,EAAE,CAAC;YAEnB,KAAK,CAAC,QAAS,CAAC,IAAW,CAAC,CAAC;QAC/B,CAAC,IAEA,KAAK,CAAC,QAAQ,CACV,CACR,CAAC;AACJ,CAAC;AAED,eAAe,IAAI,CAAC"}

package/{form → src/form}/form.module.css

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

package/src/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/src/gridContainer/gridContainer.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+interface GridContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    xs?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+    rowGap?: number;
+    columnGap?: number;
+}
+declare function GridContainer(props: GridContainerProps): JSX.Element;
+export default GridContainer;

package/src/gridContainer/gridContainer.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { joinClassNames, joinStyles } from "@yakad/lib";
+import styles from "./gridContainer.module.css";
+// Custom Button Element
+function GridContainer(props) {
+    const joinedClassNames = joinClassNames(styles.gridcontainer, props.className);
+    const joinedStyles = joinStyles(props.xl ? { gridTemplateColumns: " 1fr".repeat(props.xl) } : {}, { columnGap: props.columnGap ? props.columnGap + "rem" : "1.5rem" }, { rowGap: props.rowGap ? props.rowGap + "rem" : "1.5rem" }, props.style);
+    return (React.createElement("div", { ...props, className: joinedClassNames, style: joinedStyles }, props.children));
+}
+export default GridContainer;
+//# sourceMappingURL=gridContainer.js.map

package/src/gridContainer/gridContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gridContainer.js","sourceRoot":"","sources":["gridContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAYhD,wBAAwB;AACxB,SAAS,aAAa,CAAC,KAAyB;IAC9C,MAAM,gBAAgB,GAAG,cAAc,CACrC,MAAM,CAAC,aAAa,EACpB,KAAK,CAAC,SAAU,CACjB,CAAC;IACF,MAAM,YAAY,GAAG,UAAU,CAC7B,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,mBAAmB,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAChE,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,EACnE,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,EAC1D,KAAK,CAAC,KAAM,CACb,CAAC;IACF,OAAO,CACL,gCAAS,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,IAC7D,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;AAED,eAAe,aAAa,CAAC"}

package/{gridContainer → src/gridContainer}/gridContainer.module.css

@@ -1,4 +1,4 @@
-.gridcontainer {
-    display: grid;
-    box-sizing: border-box;
-}
+.gridcontainer {
+    display: grid;
+    box-sizing: border-box;
+}

package/src/gridContainer/gridContainer.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { joinClassNames, joinStyles } from "@yakad/lib";
+import styles from "./gridContainer.module.css";
+
+interface GridContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  xs?: number;
+  sm?: number;
+  md?: number;
+  lg?: number;
+  xl?: number;
+  rowGap?: number;
+  columnGap?: number;
+}
+
+// Custom Button Element
+function GridContainer(props: GridContainerProps) {
+  const joinedClassNames = joinClassNames(
+    styles.gridcontainer,
+    props.className!
+  );
+  const joinedStyles = joinStyles(
+    props.xl ? { gridTemplateColumns: " 1fr".repeat(props.xl) } : {},
+    { 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/src/gridItem/gridItem.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    xs?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+}
+declare function GridItem(props: GridItemProps): JSX.Element;
+export default GridItem;

package/src/gridItem/gridItem.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { joinStyles } from "@yakad/lib";
+// Custom Button Element
+function GridItem(props) {
+    const joinedStyles = joinStyles(props.xl ? { gridColumn: "span " + props.xl } : {}, props.style);
+    return (React.createElement("div", { ...props, style: joinedStyles }, props.children));
+}
+export default GridItem;
+//# sourceMappingURL=gridItem.js.map

package/src/gridItem/gridItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gridItem.js","sourceRoot":"","sources":["gridItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAkB,UAAU,EAAE,MAAM,YAAY,CAAC;AAWxD,wBAAwB;AACxB,SAAS,QAAQ,CAAC,KAAoB;IACpC,MAAM,YAAY,GAAG,UAAU,CAC7B,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,OAAO,GAAG,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,EAClD,KAAK,CAAC,KAAM,CACb,CAAC;IAEF,OAAO,CACL,gCAAS,KAAK,EAAE,KAAK,EAAE,YAAY,IAChC,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;AAED,eAAe,QAAQ,CAAC"}

package/src/gridItem/gridItem.tsx

@@ -0,0 +1,27 @@
+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 joinedStyles = joinStyles(
+    props.xl ? { gridColumn: "span " + props.xl } : {},
+    props.style!
+  );
+
+  return (
+    <div {...props} style={joinedStyles}>
+      {props.children}
+    </div>
+  );
+}
+
+export default GridItem;

package/src/historyBack/historyBack.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare function HistoryBack(props: React.HTMLAttributes<HTMLDivElement>): JSX.Element;
+export default HistoryBack;

package/src/historyBack/historyBack.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+function HistoryBack(props) {
+    const navigate = useNavigate();
+    return (React.createElement("div", { ...props, onClick: () => {
+            navigate(-1);
+            props.onClick(null);
+        } }, props.children));
+}
+export default HistoryBack;
+//# sourceMappingURL=historyBack.js.map

package/src/historyBack/historyBack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"historyBack.js","sourceRoot":"","sources":["historyBack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,SAAS,WAAW,CAAC,KAA2C;IAC5D,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAE/B,OAAO,CACH,gCACQ,KAAK,EACT,OAAO,EAAE,GAAG,EAAE;YACV,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;YACb,KAAK,CAAC,OAAQ,CAAC,IAAW,CAAC,CAAC;QAChC,CAAC,IAEA,KAAK,CAAC,QAAQ,CACb,CACT,CAAC;AACN,CAAC;AAED,eAAe,WAAW,CAAC"}

package/{historyBack → src/historyBack}/historyBack.tsx

@@ -1,20 +1,20 @@
-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;
+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/src/hr/hr.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface HrProps extends React.HTMLAttributes<HTMLElement> {
+    variant?: "dotted" | "dashed" | "shortLine";
+    height?: number;
+    marginTopBottom?: number;
+}
+declare function Hr(props: HrProps): JSX.Element;
+export default Hr;

package/src/hr/hr.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { joinClassNames, joinStyles } from "@yakad/lib";
+import styles from "./hr.module.css";
+function Hr(props) {
+    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 React.createElement("hr", { ...props, className: joinedClassNames, style: joinedStyles });
+}
+export default Hr;
+//# sourceMappingURL=hr.js.map

package/src/hr/hr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hr.js","sourceRoot":"","sources":["hr.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAQrC,SAAS,EAAE,CAAC,KAAc;IACxB,MAAM,gBAAgB,GAAG,cAAc,CACrC,MAAM,CAAC,EAAE,EACT,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,EAC1C,KAAK,CAAC,SAAU,CACjB,CAAC;IAEF,MAAM,YAAY,GAAG,UAAU,CAC7B,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,KAAK,CAAC,MAAM,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,EAC5D,KAAK,CAAC,eAAe;QACnB,CAAC,CAAC,UAAU,CACR,EAAE,SAAS,EAAE,KAAK,CAAC,eAAe,GAAG,KAAK,EAAE,EAC5C,EAAE,YAAY,EAAE,KAAK,CAAC,eAAe,GAAG,KAAK,EAAE,CAChD;QACH,CAAC,CAAC,EAAE,EACN,KAAK,CAAC,KAAM,CACb,CAAC;IAEF,OAAO,+BAAQ,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,GAAO,CAAC;AAChF,CAAC;AAED,eAAe,EAAE,CAAC"}

package/{hr → src/hr}/hr.module.css

@@ -1,18 +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%;
-}
+.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/src/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/src/index.d.ts

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

package/src/index.js

@@ -0,0 +1,22 @@
+import AppBar from "./appBar/appBar";
+import Button from "./button/button";
+import Container from "./container/container";
+import GridContainer from "./gridContainer/gridContainer";
+import GridItem from "./gridItem/gridItem";
+import Stack from "./stack/stack";
+import Navigation from "./navigation/navigation";
+import ClickAwayListener from "./clickAwayListener/clickAwayListener";
+import List from "./list/list";
+import ListItem from "./listItem/listItem";
+import Main from "./main/main";
+import Page from "./page/page";
+import Spacer from "./spacer/spacer";
+import Hr from "./hr/hr";
+import Form from "./form/form";
+import SvgIcon from "./svgIcon/svgIcon";
+import HistoryBack from "./historyBack/historyBack";
+import Row from "./row/row";
+import Footer from "./footer/footer";
+import Card from "./card/card";
+export { Container, GridContainer, GridItem, Stack, Navigation, ClickAwayListener, AppBar, Button, List, ListItem, Main, Page, Spacer, Hr, Form, SvgIcon, HistoryBack, Row, Footer, Card, };
+//# sourceMappingURL=index.js.map

package/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,uBAAuB,CAAC;AAC9C,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAC1D,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAC3C,OAAO,KAAK,MAAM,eAAe,CAAC;AAClC,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,iBAAiB,MAAM,uCAAuC,CAAC;AACtE,OAAO,IAAI,MAAM,aAAa,CAAC;AAC/B,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAC3C,OAAO,IAAI,MAAM,aAAa,CAAC;AAC/B,OAAO,IAAI,MAAM,aAAa,CAAC;AAC/B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,MAAM,SAAS,CAAC;AACzB,OAAO,IAAI,MAAM,aAAa,CAAC;AAC/B,OAAO,OAAO,MAAM,mBAAmB,CAAC;AACxC,OAAO,WAAW,MAAM,2BAA2B,CAAC;AACpD,OAAO,GAAG,MAAM,WAAW,CAAC;AAC5B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,IAAI,MAAM,aAAa,CAAC;AAE/B,OAAO,EACH,SAAS,EACT,aAAa,EACb,QAAQ,EACR,KAAK,EACL,UAAU,EACV,iBAAiB,EACjB,MAAM,EACN,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,EAAE,EACF,IAAI,EACJ,OAAO,EACP,WAAW,EACX,GAAG,EACH,MAAM,EACN,IAAI,GACP,CAAC"}

package/{index.tsx → src/index.tsx}

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

package/src/list/list.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface ListProps extends React.HTMLAttributes<HTMLUListElement> {
+    direction?: "row" | "column";
+    collapsed?: boolean;
+}
+declare function List(props: ListProps): JSX.Element;
+export default List;

package/src/list/list.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { joinClassNames } from "@yakad/lib";
+import styles from "./list.module.css";
+function List(props) {
+    const joinedClassNames = joinClassNames(styles.list, props.direction ? styles[props.direction] : styles.row, props.collapsed ? styles.collapsed : "", props.className);
+    return (React.createElement("ul", { ...props, className: joinedClassNames }, props.children));
+}
+export default List;
+//# sourceMappingURL=list.js.map

package/src/list/list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.js","sourceRoot":"","sources":["list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAOvC,SAAS,IAAI,CAAC,KAAgB;IAC5B,MAAM,gBAAgB,GAAG,cAAc,CACrC,MAAM,CAAC,IAAI,EACX,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,EACtD,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EACvC,KAAK,CAAC,SAAU,CACjB,CAAC;IAEF,OAAO,CACL,+BAAQ,KAAK,EAAE,SAAS,EAAE,gBAAgB,IACvC,KAAK,CAAC,QAAQ,CACZ,CACN,CAAC;AACJ,CAAC;AAED,eAAe,IAAI,CAAC"}

package/{list → src/list}/list.module.css

@@ -1,22 +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;
-}
+.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/src/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/src/listItem/listItem.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare function ListItem(props: React.HTMLAttributes<HTMLLIElement>): JSX.Element;
+export default ListItem;

package/src/listItem/listItem.js

@@ -0,0 +1,7 @@
+import React from "react";
+import styles from "./listItem.module.css";
+function ListItem(props) {
+    return (React.createElement("li", { className: styles.listItem, ...props }, props.children));
+}
+export default ListItem;
+//# sourceMappingURL=listItem.js.map

package/src/listItem/listItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"listItem.js","sourceRoot":"","sources":["listItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAE3C,SAAS,QAAQ,CAAC,KAA0C;IAC1D,OAAO,CACL,4BAAI,SAAS,EAAE,MAAM,CAAC,QAAQ,KAAM,KAAK,IACtC,KAAK,CAAC,QAAQ,CACZ,CACN,CAAC;AACJ,CAAC;AAED,eAAe,QAAQ,CAAC"}

package/{listItem → src/listItem}/listItem.module.css

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

package/src/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;