@yakad/ui 1.2.92-beta → 1.2.94-beta

package/appBar/appBar.d.ts

@@ -1,2 +1,5 @@
 import React from "react";
-export default function AppBar(props: React.HTMLAttributes<HTMLElement>): JSX.Element;
+export interface AppbarProps extends React.HTMLAttributes<HTMLDivElement> {
+    positionSticky?: boolean;
+}
+export default function AppBar(props: AppbarProps): JSX.Element;

package/appBar/appBar.js

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

package/appBar/appBar.js.map

@@ -1 +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,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAwC;IACnE,MAAM,gBAAgB,GAAG,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,SAAU,CAAC,CAAC;IAEzE,OAAO,CACH,mCAAY,KAAK,EAAE,SAAS,EAAE,gBAAgB,IACzC,KAAK,CAAC,QAAQ,CACV,CACZ,CAAC;AACN,CAAC"}
+{"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;AAMzC,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAkB;IAC7C,MAAM,gBAAgB,GAAG,cAAc,CACnC,MAAM,CAAC,MAAM,EACb,KAAK,CAAC,SAAU,EAChB,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAC9C,CAAC;IAEF,OAAO,CACH,mCAAY,KAAK,EAAE,SAAS,EAAE,gBAAgB,IACzC,KAAK,CAAC,QAAQ,CACV,CACZ,CAAC;AACN,CAAC"}

package/appBar/appBar.module.css

@@ -13,3 +13,7 @@
     fill: rgb(var(--onSurfaceColor, 28 27 31));
     user-select: none;
 }
+.sticky {
+    position: sticky;
+    top: 0;
+}

package/appBar/appBar.tsx

@@ -2,8 +2,16 @@ import React from "react";
 import { joinClassNames, joinStyles } from "@yakad/lib";
 import styles from "./appBar.module.css";
 
-export default function AppBar(props: React.HTMLAttributes<HTMLElement>) {
-    const joinedClassNames = joinClassNames(styles.header, props.className!);
+export interface AppbarProps extends React.HTMLAttributes<HTMLDivElement> {
+    positionSticky?: boolean;
+}
+
+export default function AppBar(props: AppbarProps) {
+    const joinedClassNames = joinClassNames(
+        styles.header,
+        props.className!,
+        props.positionSticky ? styles.Sticky : null
+    );
 
     return (
         <header {...props} className={joinedClassNames}>

package/button/button.module.css

@@ -2,9 +2,9 @@
     position: relative;
     display: flex;
     align-items: center;
-    line-height: 3rem;
+    line-height: 2rem;
     font-weight: 700;
-    padding: 0 var(--padding);
+    padding: 0.5rem var(--padding);
     border: none;
     background: none;
     color: inherit;
@@ -12,10 +12,11 @@
     user-select: none;
     cursor: pointer;
     box-sizing: border-box;
+    text-decoration: none;
 }
 .small {
     min-width: 3rem;
-    height: 3rem;
+    min-height: 3rem;
     --padding: 2rem;
     gap: 0.4rem;
     font-size: 1.2rem;
@@ -23,7 +24,7 @@
 }
 .medium {
     min-width: 4rem;
-    height: 4rem;
+    min-height: 4rem;
     --padding: 2.4rem;
     gap: 0.8rem;
     font-size: 1.4rem;
@@ -31,7 +32,7 @@
 }
 .large {
     min-width: 5rem;
-    height: 5rem;
+    min-height: 5rem;
     --padding: 3.2rem;
     gap: 1.1rem;
     font-size: 1.8rem;

package/card/card.module.css

@@ -1,6 +1,7 @@
 .card {
     width: 100%;
     padding: 3rem;
+    margin: auto;
     box-sizing: border-box;
     border-radius: 2rem;
     background: rgb(var(--surfaceContainerHighestColor, 230 224 233));

package/container/container.module.css

@@ -1,6 +1,6 @@
 div.container {
     display: flex;
-    flex-direction: inherit;
+    flex-direction: column;
     width: 100%;
     padding: 2rem;
     margin: auto;

package/gridContainer/gridContainer.module.css

@@ -1,5 +1,6 @@
 .gridcontainer {
     display: grid;
+    align-items: center;
     width: 100%;
     box-sizing: border-box;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

package/package.json

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