@schemavaults/ui 0.78.0 → 0.78.2

package/dist/components/ui/themed-page-background/themed-page-background.d.ts

@@ -4,6 +4,8 @@ export interface ThemedPageBackgroundProps extends PropsWithChildren {
     className?: string;
     /** Append classnames to the background gradient container */
     backgroundClassName?: string;
+    /** Gradient colors. Tuple of [from, to]. Any CSS color string works. */
+    gradientColors?: [from: string, to: string];
 }
 /**
  * @name ThemedPageBackground
@@ -12,5 +14,5 @@ export interface ThemedPageBackgroundProps extends PropsWithChildren {
  *
  * @returns A component that fills the background container with a colorful SchemaVaults-themed background; child content is displayed on top
  */
-export declare function ThemedPageBackground({ children, ...props }: ThemedPageBackgroundProps): ReactElement;
+export declare function ThemedPageBackground({ children, gradientColors, ...props }: ThemedPageBackgroundProps): ReactElement;
 export default ThemedPageBackground;

package/dist/components/ui/themed-page-background/themed-page-background.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../../../lib/utils";
+import { getSchemaVaultsBrandColor } from "@schemavaults/theme/brand_colors";
 /**
  * @name ThemedPageBackground
  *
@@ -8,16 +9,27 @@ import { cn } from "../../../lib/utils";
  *
  * @returns A component that fills the background container with a colorful SchemaVaults-themed background; child content is displayed on top
  */
-export function ThemedPageBackground({ children, ...props }) {
+export function ThemedPageBackground({ children, gradientColors = [
+    getSchemaVaultsBrandColor("schemavaults-brand-red"),
+    getSchemaVaultsBrandColor("schemavaults-brand-blue"),
+], ...props }) {
+    if (!Array.isArray(gradientColors) ||
+        typeof gradientColors[0] !== "string" ||
+        typeof gradientColors[1] !== "string") {
+        throw new TypeError("Expected a [from, to] tuple containing classNames for the <ThemedPageBackground /> gradient!");
+    }
+    const fromColor = gradientColors[0];
+    const toColor = gradientColors[1];
     const backgroundClassNames = [
         "schemavaults-themed-page-background",
         "relative min-h-full w-full shrink-0",
-        "bg-schemavaults-brand-blue bg-gradient-to-b from-schemavaults-brand-red to-transparent",
     ];
     if (typeof props.backgroundClassName === "string") {
         backgroundClassNames.push(props.backgroundClassName);
     }
-    return (_jsx("div", { className: backgroundClassNames.join(" "), children: _jsx("div", { className: cn("schemavaults-themed-page-background-internal-content", "relative z-10", "w-full min-h-full", props.className), children: children }) }));
+    return (_jsx("div", { className: backgroundClassNames.join(" "), children: _jsx("div", { className: cn("schemavaults-themed-page-background-internal-content", "relative z-10", "w-full min-h-full", props.className), style: {
+                backgroundImage: `linear-gradient(to bottom, ${fromColor}, ${toColor})`,
+            }, children: children }) }));
 }
 export default ThemedPageBackground;
 //# sourceMappingURL=themed-page-background.js.map

package/dist/components/ui/themed-page-background/themed-page-background.js.map

@@ -1 +1 @@
-{"version":3,"file":"themed-page-background.js","sourceRoot":"","sources":["../../../../src/components/ui/themed-page-background/themed-page-background.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AASjC;;;;;;GAMG;AACH,MAAM,UAAU,oBAAoB,CAAC,EACnC,QAAQ,EACR,GAAG,KAAK,EACkB;IAC1B,MAAM,oBAAoB,GAAa;QACrC,qCAAqC;QACrC,qCAAqC;QACrC,wFAAwF;KACzF,CAAC;IACF,IAAI,OAAO,KAAK,CAAC,mBAAmB,KAAK,QAAQ,EAAE,CAAC;QAClD,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;IACvD,CAAC;IAED,OAAO,CACL,cAAK,SAAS,EAAE,oBAAoB,CAAC,IAAI,CAAC,GAAG,CAAC,YAC5C,cACE,SAAS,EAAE,EAAE,CACX,sDAAsD,EACtD,eAAe,EACf,mBAAmB,EACnB,KAAK,CAAC,SAAS,CAChB,YAEA,QAAQ,GACL,GACF,CACP,CAAC;AACJ,CAAC;AAED,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"themed-page-background.js","sourceRoot":"","sources":["../../../../src/components/ui/themed-page-background/themed-page-background.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,yBAAyB,EAAE,MAAM,kCAAkC,CAAC;AAa7E;;;;;;GAMG;AACH,MAAM,UAAU,oBAAoB,CAAC,EACnC,QAAQ,EACR,cAAc,GAAG;IACf,yBAAyB,CAAC,wBAAwB,CAAC;IACnD,yBAAyB,CAAC,yBAAyB,CAAC;CAC5C,EACV,GAAG,KAAK,EACkB;IAC1B,IACE,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC;QAC9B,OAAO,cAAc,CAAC,CAAC,CAAC,KAAK,QAAQ;QACrC,OAAO,cAAc,CAAC,CAAC,CAAC,KAAK,QAAQ,EACrC,CAAC;QACD,MAAM,IAAI,SAAS,CACjB,8FAA8F,CAC/F,CAAC;IACJ,CAAC;IACD,MAAM,SAAS,GAAW,cAAc,CAAC,CAAC,CAAC,CAAC;IAC5C,MAAM,OAAO,GAAW,cAAc,CAAC,CAAC,CAAC,CAAC;IAE1C,MAAM,oBAAoB,GAAa;QACrC,qCAAqC;QACrC,qCAAqC;KACtC,CAAC;IACF,IAAI,OAAO,KAAK,CAAC,mBAAmB,KAAK,QAAQ,EAAE,CAAC;QAClD,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;IACvD,CAAC;IAED,OAAO,CACL,cAAK,SAAS,EAAE,oBAAoB,CAAC,IAAI,CAAC,GAAG,CAAC,YAC5C,cACE,SAAS,EAAE,EAAE,CACX,sDAAsD,EACtD,eAAe,EACf,mBAAmB,EACnB,KAAK,CAAC,SAAS,CAChB,EACD,KAAK,EAAE;gBACL,eAAe,EAAE,8BAA8B,SAAS,KAAK,OAAO,GAAG;aACxE,YAEA,QAAQ,GACL,GACF,CACP,CAAC;AACJ,CAAC;AAED,eAAe,oBAAoB,CAAC"}

package/dist/components/ui/wordmark/wordmark.d.ts

@@ -1,6 +1,14 @@
 import type { ReactElement } from "react";
 export interface WordmarkProps {
+    /**
+     * @description The actual string to (beautifully) render
+     */
+    wordmarkText?: string;
+    /**
+     * @example ["from-schemavaults-brand-blue", "to-schemavaults-brand-red"]
+     */
+    gradientColors?: [fromClassName: string, toClassName: string];
     className?: string;
 }
-export declare function Wordmark({ className }: WordmarkProps): ReactElement;
+export declare function Wordmark({ wordmarkText, gradientColors, className, }: WordmarkProps): ReactElement;
 export default Wordmark;

package/dist/components/ui/wordmark/wordmark.js

@@ -1,8 +1,27 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../../../lib/utils";
-export function Wordmark({ className }) {
-    return (_jsx("span", { className: cn("text-transparent bg-clip-text bg-gradient-to-br", "from-schemavaults-brand-blue to-schemavaults-brand-red", "text-nowrap", className), children: "SchemaVaults" }));
+import { getSchemaVaultsBrandColor } from "@schemavaults/theme/brand_colors";
+const DEFAULT_WORDMARK_TEXT = "SchemaVaults";
+export function Wordmark({ wordmarkText = DEFAULT_WORDMARK_TEXT, gradientColors = [
+    getSchemaVaultsBrandColor("schemavaults-brand-blue"),
+    getSchemaVaultsBrandColor("schemavaults-brand-red"),
+], className, }) {
+    if (typeof wordmarkText !== "string" || !(wordmarkText.length > 0)) {
+        throw new TypeError("Expected 'wordmarkText' to render to be a non-empty string!");
+    }
+    if (!Array.isArray(gradientColors) ||
+        typeof gradientColors[0] !== "string" ||
+        typeof gradientColors[1] !== "string") {
+        throw new TypeError("Expected a [from, to] tuple containing classNames for the <Wordmark /> gradient!");
+    }
+    const fromColor = gradientColors[0];
+    const toColor = gradientColors[1];
+    return (_jsx("span", { className: className, style: {
+            textWrap: "nowrap",
+            color: "transparent",
+            backgroundClip: "text",
+            backgroundImage: `linear-gradient(to bottom right, ${fromColor}, ${toColor})`,
+        }, children: wordmarkText }));
 }
 export default Wordmark;
 //# sourceMappingURL=wordmark.js.map

package/dist/components/ui/wordmark/wordmark.js.map

@@ -1 +1 @@
-{"version":3,"file":"wordmark.js","sourceRoot":"","sources":["../../../../src/components/ui/wordmark/wordmark.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAOjC,MAAM,UAAU,QAAQ,CAAC,EAAE,SAAS,EAAiB;IACnD,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,iDAAiD,EACjD,wDAAwD,EACxD,aAAa,EACb,SAAS,CACV,6BAGI,CACR,CAAC;AACJ,CAAC;AAED,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"wordmark.js","sourceRoot":"","sources":["../../../../src/components/ui/wordmark/wordmark.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,yBAAyB,EAAE,MAAM,kCAAkC,CAAC;AAG7E,MAAM,qBAAqB,GAAG,cAAuB,CAAC;AAgBtD,MAAM,UAAU,QAAQ,CAAC,EACvB,YAAY,GAAG,qBAAqB,EACpC,cAAc,GAAG;IACf,yBAAyB,CAAC,yBAAyB,CAAC;IACpD,yBAAyB,CAAC,wBAAwB,CAAC;CAC3C,EACV,SAAS,GACK;IACd,IAAI,OAAO,YAAY,KAAK,QAAQ,IAAI,CAAC,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC;QACnE,MAAM,IAAI,SAAS,CACjB,6DAA6D,CAC9D,CAAC;IACJ,CAAC;IAED,IACE,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC;QAC9B,OAAO,cAAc,CAAC,CAAC,CAAC,KAAK,QAAQ;QACrC,OAAO,cAAc,CAAC,CAAC,CAAC,KAAK,QAAQ,EACrC,CAAC;QACD,MAAM,IAAI,SAAS,CACjB,kFAAkF,CACnF,CAAC;IACJ,CAAC;IACD,MAAM,SAAS,GAAW,cAAc,CAAC,CAAC,CAAC,CAAC;IAC5C,MAAM,OAAO,GAAW,cAAc,CAAC,CAAC,CAAC,CAAC;IAE1C,OAAO,CACL,eACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE;YACL,QAAQ,EAAE,QAAQ;YAClB,KAAK,EAAE,aAAa;YACpB,cAAc,EAAE,MAAM;YACtB,eAAe,EAAE,oCAAoC,SAAS,KAAK,OAAO,GAAG;SAC9E,YAEA,YAAY,GACR,CACR,CAAC;AACJ,CAAC;AAED,eAAe,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schemavaults/ui",
-  "version": "0.78.0",
+  "version": "0.78.2",
   "private": false,
   "license": "UNLICENSED",
   "description": "React.js UI components for SchemaVaults frontend applications",
@@ -36,7 +36,7 @@
     "@radix-ui/react-toast": "1.2.14",
     "@radix-ui/react-tooltip": "1.2.7",
     "@radix-ui/react-visually-hidden": "1.2.3",
-    "@schemavaults/theme": "0.25.9",
+    "@schemavaults/theme": "0.26.1",
     "@tanstack/react-table": "8.20.1",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",