@yakad/ui 1.0.9 → 1.1.1

package/button/button.module.css

@@ -0,0 +1,113 @@
+.button {
+    display: flex;
+    align-items: center;
+    line-height: 3rem;
+    padding: 0 var(--padding);
+    border: none;
+    background: none;
+    color: inherit;
+    fill: inherit;
+    user-select: none;
+    cursor: pointer;
+    box-sizing: border-box;
+}
+.small {
+    min-width: 3rem;
+    height: 3rem;
+    --padding: 1.2rem;
+    gap: 0.4rem;
+    font-size: 1.2rem;
+    --border-radius: 1.5rem;
+}
+.medium {
+    min-width: 4rem;
+    height: 4rem;
+    --padding: 1.8rem;
+    gap: 0.8rem;
+    font-size: 1.6rem;
+    --border-radius: 2rem;
+}
+.large {
+    min-width: 5rem;
+    height: 5rem;
+    --padding: 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;
+}
+.link {
+    background: transparent;
+    display: block;
+    position: relative;
+    transition: 0.3s;
+}
+.link:before {
+    content: "";
+    position: absolute;
+    bottom: 0.5rem;
+    left: 0;
+    right: 0;
+    width: 0;
+    height: 0.1rem;
+    padding: 0;
+    margin: 0 auto;
+    background-color: var(--secondaryColor);
+    transition: 0.3s;
+}
+.link:hover {
+    box-shadow: none;
+}
+.link:hover:before {
+    width: calc(100% - var(--padding));
+}

package/button/button.tsx

@@ -0,0 +1,53 @@
+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" | "link";
+    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/container → container}/container.module.css

@@ -1,6 +1,6 @@
 div.container {
     display: flex;
-    flex-direction: column;
+    flex-direction: inherit;
     width: 100%;
     margin: auto;
     box-sizing: border-box;

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/{src/gridItem → gridItem}/gridItem.tsx

@@ -16,9 +16,8 @@ function GridItem(props: GridItemProps) {
         props.xl ? styles["xl" + props.xl] : "",
         props.lg ? styles["lg" + props.lg] : "",
         props.md ? styles["md" + props.md] : "",
-        props.sm ? styles["sm" + props.md] : "",
-        props.xs ? styles["xs" + props.md] : "",
-
+        props.md ? styles["sm" + props.md] : "",
+        props.md ? styles["xs" + props.md] : "",
         props.className!
     );
 

package/package.json

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

package/tsconfig.json

@@ -1,13 +1,13 @@
 {
-  "compilerOptions": {
-    "noImplicitAny": true,
-    "module": "es2022",
-    "target": "es2022",
-    "jsx": "react",
-    "allowJs": true,
-    "moduleResolution": "node",
-    "declaration": true,
-    "sourceMap": true,
-    "allowSyntheticDefaultImports": true
-  }
+    "compilerOptions": {
+        "noImplicitAny": true,
+        "module": "es2022",
+        "target": "es2022",
+        "jsx": "react",
+        "allowJs": true,
+        "moduleResolution": "node",
+        "declaration": true,
+        "sourceMap": true,
+        "allowSyntheticDefaultImports": true
+    }
 }

package/src/button/button.module.css

@@ -1,113 +0,0 @@
-.button {
-  display: flex;
-  align-items: center;
-  line-height: 3rem;
-  padding: 0 var(--padding);
-  border: none;
-  background: none;
-  color: inherit;
-  fill: inherit;
-  user-select: none;
-  cursor: pointer;
-  box-sizing: border-box;
-}
-.small {
-  min-width: 3rem;
-  height: 3rem;
-  --padding: 1.2rem;
-  gap: 0.4rem;
-  font-size: 1.2rem;
-  --border-radius: 1.5rem;
-}
-.medium {
-  min-width: 4rem;
-  height: 4rem;
-  --padding: 1.8rem;
-  gap: 0.8rem;
-  font-size: 1.6rem;
-  --border-radius: 2rem;
-}
-.large {
-  min-width: 5rem;
-  height: 5rem;
-  --padding: 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;
-}
-.link {
-  background: transparent;
-  display: block;
-  position: relative;
-  transition: 0.3s;
-}
-.link:before {
-  content: "";
-  position: absolute;
-  bottom: 0.5rem;
-  left: 0;
-  right: 0;
-  width: 0;
-  height: 0.1rem;
-  padding: 0;
-  margin: 0 auto;
-  background-color: var(--secondaryColor);
-  transition: 0.3s;
-}
-.link:hover {
-  box-shadow: none;
-}
-.link:hover:before {
-  width: calc(100% - var(--padding));
-}

package/src/button/button.tsx

@@ -1,49 +0,0 @@
-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" | "link";
-  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/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/src/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/src/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;
-  }
-}