@yakad/ui 1.0.0 → 1.0.2

package/declaration.d.ts

@@ -0,0 +1 @@
+declare module "*.module.css";

package/package.json

@@ -1,25 +1,32 @@
 {
   "name": "@yakad/ui",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "",
-  "main": "index.js",
+  "main": "./src/index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "publishConfig": {
-    "access": "public"
+    "build": "tsc",
+    "test": "echo hector test: not impl"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/NatiqQuran/yakad.git"
   },
-  "keywords": [
-    "ui"
-  ],
-  "author": "natiq",
+  "author": "Natiq",
   "license": "GPL-3.0",
   "bugs": {
     "url": "https://github.com/NatiqQuran/yakad/issues"
   },
-  "homepage": "https://github.com/NatiqQuran/yakad#readme"
+  "homepage": "https://github.com/NatiqQuran/yakad#readme",
+  "dependencies": {
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.6",
+    "@yakad/lib": "^1.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.4.2",
+    "typescript": "^4.8.4"
+  },
+  "devDependencies": {
+    "typescript-plugin-css-modules": "^3.4.0"
+  }
 }

package/src/appBar/appBar.d.ts

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

package/src/appBar/appBar.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { joinClassNames } from "@yakad/lib";
+import styles from "./appBar.module.css";
+function AppBar(props) {
+    const joinedClassNames = joinClassNames(styles.header, props.className);
+    return (React.createElement("header", { ...props, className: joinedClassNames }, props.children));
+}
+export default AppBar;
+//# sourceMappingURL=appBar.js.map

package/src/appBar/appBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"appBar.js","sourceRoot":"","sources":["appBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAc,MAAM,YAAY,CAAC;AACxD,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAEzC,SAAS,MAAM,CAAC,KAAwC;IACtD,MAAM,gBAAgB,GAAG,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,SAAU,CAAC,CAAC;IAEzE,OAAO,CACL,mCAAY,KAAK,EAAE,SAAS,EAAE,gBAAgB,IAC3C,KAAK,CAAC,QAAQ,CACR,CACV,CAAC;AACJ,CAAC;AAED,eAAe,MAAM,CAAC"}

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

@@ -1,15 +1,15 @@
-.header {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    box-sizing: border-box;
-    gap: 1.5rem;
-    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;
-}
+.header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    box-sizing: border-box;
+    gap: 1.5rem;
+    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/src/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/src/button/button.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+    variant?: "text" | "outlined" | "filled" | "tonal" | "elevated";
+    size?: "small" | "medium" | "large";
+    borderStyle?: "none" | "semi" | "rounded";
+    icon?: JSX.Element;
+}
+declare function Button(props: ButtonProps): JSX.Element;
+export default Button;

package/src/button/button.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { joinClassNames } from "@yakad/lib";
+import styles from "./button.module.css";
+import SvgIcon from "../svgIcon/svgIcon";
+const svgSizeMaps = {
+    small: 2,
+    medium: 2.4,
+    large: 3,
+};
+function Button(props) {
+    const joinedClassNames = joinClassNames(styles.button, props.variant ? styles[props.variant] : styles.text, props.size ? styles[props.size] : styles.medium, props.borderStyle ? styles[props.borderStyle] : styles.rounded, props.icon && !props.children ? styles.iconButton : "", props.className);
+    return (React.createElement("button", { ...props, className: joinedClassNames },
+        props.icon ? (React.createElement(SvgIcon, { size: props.size ? svgSizeMaps[props.size] : svgSizeMaps.medium }, props.icon)) : null,
+        props.children));
+}
+export default Button;
+//# sourceMappingURL=button.js.map

package/src/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,OAAO,MAAM,oBAAoB,CAAC;AAezC,MAAM,WAAW,GAAe;IAC9B,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,CAAC;CACT,CAAC;AAEF,SAAS,MAAM,CAAC,KAAkB;IAChC,MAAM,gBAAgB,GAAG,cAAc,CACrC,MAAM,CAAC,MAAM,EACb,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EACnD,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,EAC/C,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,EAC9D,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EACtD,KAAK,CAAC,SAAU,CACjB,CAAC;IAEF,OAAO,CACL,mCAAY,KAAK,EAAE,SAAS,EAAE,gBAAgB;QAC3C,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CACZ,oBAAC,OAAO,IACN,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,IAE9D,KAAK,CAAC,IAAI,CACH,CACX,CAAC,CAAC,CAAC,IAAI;QACP,KAAK,CAAC,QAAQ,CACR,CACV,CAAC;AACJ,CAAC;AAED,eAAe,MAAM,CAAC"}

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

@@ -1,87 +1,87 @@
-.button {
-    display: flex;
-    align-items: center;
-    line-height: 3rem;
-    border: none;
-    background: none;
-    color: inherit;
-    fill: inherit;
-    user-select: none;
-    cursor: pointer;
-    box-sizing: border-box;
-}
-.small {
-    min-width: 3rem;
-    height: 3rem;
-    padding: 0 1.2rem;
-    gap: 0.4rem;
-    font-size: 1.2rem;
-    --border-radius: 1.5rem;
-}
-.medium {
-    min-width: 4rem;
-    height: 4rem;
-    padding: 0 1.8rem;
-    gap: 0.8rem;
-    font-size: 1.6rem;
-    --border-radius: 2rem;
-}
-.large {
-    min-width: 5rem;
-    height: 5rem;
-    padding: 0 2.6rem;
-    gap: 1.1rem;
-    font-size: 1.8rem;
-    --border-radius: 2.5rem;
-}
-
-.iconButton {
-    padding: 0;
-    justify-content: center;
-}
-
-.none {
-    border-radius: 0;
-}
-.semi {
-    border-radius: 0 var(--border-radius) var(--border-radius) 0;
-}
-[dir="rtl"] .semi {
-    border-radius: var(--border-radius) 0 0 var(--border-radius);
-}
-.rounded {
-    border-radius: var(--border-radius);
-}
-
-@media (pointer: fine) {
-    .button:hover {
-        cursor: pointer;
-        box-shadow: inset 0 0 10rem #7d7d7d20;
-    }
-}
-.button:active {
-    box-shadow: inset 0 0 10rem #7d7d7d30;
-}
-.button:invalid {
-    border: 0.1rem solid var(--errorColor);
-}
-
-.outlined {
-    border: 0.1rem solid #7d7d7d70;
-}
-.filled {
-    background: var(--onBackgroundColor);
-    color: var(--onPrimaryColor);
-    fill: var(--onPrimaryColor);
-}
-.tonal {
-    background: var(--onHeaderColor);
-    color: var(--onSurfaceColor);
-    fill: var(--onSurfaceColor);
-}
-.elevated {
-    background-color: var(--onPrimaryColor);
-    color: var(--onSurfaceColor);
-    fill: var(--onSurfaceColor);
-    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
-}
+.button {
+    display: flex;
+    align-items: center;
+    line-height: 3rem;
+    border: none;
+    background: none;
+    color: inherit;
+    fill: inherit;
+    user-select: none;
+    cursor: pointer;
+    box-sizing: border-box;
+}
+.small {
+    min-width: 3rem;
+    height: 3rem;
+    padding: 0 1.2rem;
+    gap: 0.4rem;
+    font-size: 1.2rem;
+    --border-radius: 1.5rem;
+}
+.medium {
+    min-width: 4rem;
+    height: 4rem;
+    padding: 0 1.8rem;
+    gap: 0.8rem;
+    font-size: 1.6rem;
+    --border-radius: 2rem;
+}
+.large {
+    min-width: 5rem;
+    height: 5rem;
+    padding: 0 2.6rem;
+    gap: 1.1rem;
+    font-size: 1.8rem;
+    --border-radius: 2.5rem;
+}
+
+.iconButton {
+    padding: 0;
+    justify-content: center;
+}
+
+.none {
+    border-radius: 0;
+}
+.semi {
+    border-radius: 0 var(--border-radius) var(--border-radius) 0;
+}
+[dir="rtl"] .semi {
+    border-radius: var(--border-radius) 0 0 var(--border-radius);
+}
+.rounded {
+    border-radius: var(--border-radius);
+}
+
+@media (pointer: fine) {
+    .button:hover {
+        cursor: pointer;
+        box-shadow: inset 0 0 10rem #7d7d7d20;
+    }
+}
+.button:active {
+    box-shadow: inset 0 0 10rem #7d7d7d30;
+}
+.button:invalid {
+    border: 0.1rem solid var(--errorColor);
+}
+
+.outlined {
+    border: 0.1rem solid #7d7d7d70;
+}
+.filled {
+    background: var(--onBackgroundColor);
+    color: var(--onPrimaryColor);
+    fill: var(--onPrimaryColor);
+}
+.tonal {
+    background: var(--onHeaderColor);
+    color: var(--onSurfaceColor);
+    fill: var(--onSurfaceColor);
+}
+.elevated {
+    background-color: var(--onPrimaryColor);
+    color: var(--onSurfaceColor);
+    fill: var(--onSurfaceColor);
+    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+}

package/src/button/button.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { joinClassNames } from "@yakad/lib";
+import styles from "./button.module.css";
+import SvgIcon from "../svgIcon/svgIcon";
+
+interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+  variant?: "text" | "outlined" | "filled" | "tonal" | "elevated";
+  size?: "small" | "medium" | "large";
+  borderStyle?: "none" | "semi" | "rounded";
+  icon?: JSX.Element;
+}
+
+interface svgSizeMap {
+  small: number;
+  medium: number;
+  large: number;
+}
+
+const svgSizeMaps: svgSizeMap = {
+  small: 2,
+  medium: 2.4,
+  large: 3,
+};
+
+function Button(props: ButtonProps) {
+  const joinedClassNames = joinClassNames(
+    styles.button,
+    props.variant ? styles[props.variant] : styles.text,
+    props.size ? styles[props.size] : styles.medium,
+    props.borderStyle ? styles[props.borderStyle] : styles.rounded,
+    props.icon && !props.children ? styles.iconButton : "",
+    props.className!
+  );
+
+  return (
+    <button {...props} className={joinedClassNames}>
+      {props.icon ? (
+        <SvgIcon
+          size={props.size ? svgSizeMaps[props.size] : svgSizeMaps.medium}
+        >
+          {props.icon}
+        </SvgIcon>
+      ) : null}
+      {props.children}
+    </button>
+  );
+}
+
+export default Button;

package/src/card/card.d.ts

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

package/src/card/card.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { joinClassNames } from "@yakad/lib";
+import styles from "./card.module.css";
+function Card(props) {
+    const joinedClassNames = joinClassNames(styles.card, props.className);
+    return (React.createElement("div", { ...props, className: joinedClassNames }, props.children));
+}
+export default Card;
+//# sourceMappingURL=card.js.map

package/src/card/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sourceRoot":"","sources":["card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,SAAS,IAAI,CAAC,KAAwC;IACpD,MAAM,gBAAgB,GAAG,cAAc,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,SAAU,CAAC,CAAC;IAEvE,OAAO,CACL,gCAAS,KAAK,EAAE,SAAS,EAAE,gBAAgB,IACxC,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;AAED,eAAe,IAAI,CAAC"}

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

@@ -1,12 +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);
-}
+.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/src/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/src/clickAwayListener/clickAwayListener.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface ClickAwayListenerProps extends React.HTMLAttributes<HTMLDivElement> {
+    onClickAway: React.MouseEventHandler<HTMLDivElement>;
+}
+declare function ClickAwayListener(props: ClickAwayListenerProps): JSX.Element;
+export default ClickAwayListener;

package/src/clickAwayListener/clickAwayListener.js

@@ -0,0 +1,17 @@
+import React, { useEffect, useRef } from "react";
+function ClickAwayListener(props) {
+    const ref = useRef(null);
+    useEffect(() => {
+        const handleOutSideClick = (event) => {
+            if (ref.current && !ref.current.contains(event.target)) {
+                props.onClickAway && props.onClickAway(event);
+            }
+        };
+        document.addEventListener("click", handleOutSideClick, true);
+        // CleanUp When element unmount
+        return () => document.removeEventListener("click", handleOutSideClick, true);
+    }, [props.onClickAway]);
+    return React.createElement("div", { ref: ref }, props.children);
+}
+export default ClickAwayListener;
+//# sourceMappingURL=clickAwayListener.js.map

package/src/clickAwayListener/clickAwayListener.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clickAwayListener.js","sourceRoot":"","sources":["clickAwayListener.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAMjD,SAAS,iBAAiB,CAAC,KAA6B;IACpD,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAEzB,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,kBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC7C,IAAI,GAAG,CAAC,OAAO,IAAI,CAAE,GAAG,CAAC,OAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;gBAC7D,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,WAAW,CAAC,KAAY,CAAC,CAAC;aACxD;QACL,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,EAAE,IAAI,CAAC,CAAC;QAE7D,+BAA+B;QAC/B,OAAO,GAAG,EAAE,CACR,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,kBAAkB,EAAE,IAAI,CAAC,CAAC;IACxE,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAExB,OAAO,6BAAK,GAAG,EAAE,GAAG,IAAG,KAAK,CAAC,QAAQ,CAAO,CAAC;AACjD,CAAC;AAED,eAAe,iBAAiB,CAAC"}

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

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

@@ -0,0 +1,7 @@
+import React from "react";
+declare type ScreenSize = "xs" | "sm" | "md" | "lg" | "xl";
+interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    maxWidth?: ScreenSize;
+}
+declare function Container(props: ContainerProps): JSX.Element;
+export default Container;

package/src/container/container.js

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

package/src/container/container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.js","sourceRoot":"","sources":["container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAc,MAAM,YAAY,CAAC;AACxD,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAQ5C,SAAS,SAAS,CAAC,KAAqB;IACtC,MAAM,gBAAgB,GAAG,cAAc,CACrC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,EAC5C,MAAM,CAAC,SAAS,EAChB,KAAK,CAAC,SAAU,CACjB,CAAC;IAEF,OAAO,CACL,gCAAS,KAAK,EAAE,SAAS,EAAE,gBAAgB,IACxC,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;AAED,eAAe,SAAS,CAAC"}

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

@@ -1,23 +1,23 @@
-div.container {
-    display: flex;
-    flex-direction: column;
-    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;
-}
+div.container {
+    display: flex;
+    flex-direction: column;
+    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/src/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/src/footer/footer.d.ts

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

package/src/footer/footer.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { joinClassNames } from "@yakad/lib";
+import styles from "./footer.module.css";
+function Footer(props) {
+    const joinedClassNames = joinClassNames(styles.footer, props.className);
+    return (React.createElement("footer", { ...props, className: joinedClassNames }, props.children));
+}
+export default Footer;
+//# sourceMappingURL=footer.js.map

package/src/footer/footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"footer.js","sourceRoot":"","sources":["footer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAEzC,SAAS,MAAM,CAAC,KAAwC;IACtD,MAAM,gBAAgB,GAAG,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,SAAU,CAAC,CAAC;IAEzE,OAAO,CACL,mCAAY,KAAK,EAAE,SAAS,EAAE,gBAAgB,IAC3C,KAAK,CAAC,QAAQ,CACR,CACV,CAAC;AACJ,CAAC;AAED,eAAe,MAAM,CAAC"}

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

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