@yakad/ui 1.2.58-beta → 1.2.60-beta

package/background/background.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface BackgroundProps extends React.HTMLAttributes<HTMLElement> {
+    variant?: "dotted" | "gradient";
+    backgroundfixed?: boolean;
+    backgroundimage?: string;
+}
+declare function Background(props: BackgroundProps): JSX.Element;
+export default Background;

package/background/background.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { joinClassNames, joinStyles } from "@yakad/lib";
+import styles from "./background.module.css";
+function Background(props) {
+    const joinedClassNames = joinClassNames(styles.div, props.variant ? styles[props.variant] : "", props.backgroundfixed ? styles.fixed : "", props.backgroundimage ? styles.image : "", props.className);
+    const joinedStyles = joinStyles(props.backgroundimage
+        ? { backgroundImage: `url(${props.backgroundimage})` }
+        : {}, props.style);
+    return (React.createElement("div", { style: joinedStyles, className: joinedClassNames }, props.children));
+}
+export default Background;
+//# sourceMappingURL=background.js.map

package/background/background.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"background.js","sourceRoot":"","sources":["background.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAO7C,SAAS,UAAU,CAAC,KAAsB;IACtC,MAAM,gBAAgB,GAAG,cAAc,CACnC,MAAM,CAAC,GAAG,EACV,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,EAC1C,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EACzC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EACzC,KAAK,CAAC,SAAU,CACnB,CAAC;IACF,MAAM,YAAY,GAAG,UAAU,CAC3B,KAAK,CAAC,eAAe;QACjB,CAAC,CAAC,EAAE,eAAe,EAAE,OAAO,KAAK,CAAC,eAAe,GAAG,EAAE;QACtD,CAAC,CAAC,EAAE,EACR,KAAK,CAAC,KAAM,CACf,CAAC;IAEF,OAAO,CACH,6BAAK,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,gBAAgB,IAChD,KAAK,CAAC,QAAQ,CACb,CACT,CAAC;AACN,CAAC;AAED,eAAe,UAAU,CAAC"}

package/background/background.module.css

@@ -0,0 +1,29 @@
+.div {
+    width: 100%;
+    background-position: center;
+}
+.div.dotted {
+    border-bottom: 1px solid rgb(203 213 224);
+    background-color: rgb(var(--surfaceContainerHighestColor, 230 224 233));
+    background-image: radial-gradient(
+        rgb(var(--surfaceContainerLowestColor, 255 255 255)) 0.8px,
+        rgb(var(--surfaceContainerHighestColor, 230 224 233)) 0.5px
+    );
+    background-size: 10px 10px;
+    box-shadow: inset 0px -11px 16px -10px rgb(125 125 125);
+}
+.div.gradient {
+    background: linear-gradient(
+        90deg,
+        rgb(var(--primaryColor, 11 87 208)) 27%,
+        rgb(var(--primaryContainerColor, 211 227 253)) 100%
+    );
+}
+
+.div.fixed {
+    background-attachment: fixed;
+}
+.div.image {
+    background-size: cover;
+    background-repeat: no-repeat;
+}

package/background/background.tsx

@@ -0,0 +1,32 @@
+import React, { PropsWithChildren } from "react";
+import { joinClassNames, joinStyles } from "@yakad/lib";
+import styles from "./background.module.css";
+interface BackgroundProps extends React.HTMLAttributes<HTMLElement> {
+    variant?: "dotted" | "gradient";
+    backgroundfixed?: boolean;
+    backgroundimage?: string;
+}
+
+function Background(props: BackgroundProps) {
+    const joinedClassNames = joinClassNames(
+        styles.div,
+        props.variant ? styles[props.variant] : "",
+        props.backgroundfixed ? styles.fixed : "",
+        props.backgroundimage ? styles.image : "",
+        props.className!
+    );
+    const joinedStyles = joinStyles(
+        props.backgroundimage
+            ? { backgroundImage: `url(${props.backgroundimage})` }
+            : {},
+        props.style!
+    );
+
+    return (
+        <div style={joinedStyles} className={joinedClassNames}>
+            {props.children}
+        </div>
+    );
+}
+
+export default Background;

package/package.json

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