@schemavaults/ui 0.77.0 → 0.78.2

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

@@ -62,6 +62,8 @@ export * from "./command";
 export type * from "./command";
 export * from "./combobox";
 export type * from "./combobox";
+export * from "./multi-select";
+export type * from "./multi-select";
 export * from "./table";
 export type * from "./table";
 export * from "./datatable";

package/dist/components/ui/index.js

@@ -30,6 +30,7 @@ export * from "./alert-dialog";
 export * from "./popover";
 export * from "./command";
 export * from "./combobox";
+export * from "./multi-select";
 export * from "./table";
 export * from "./datatable";
 export * from "./checkbox";

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ui/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ui/index.ts"],"names":[],"mappings":"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"}

package/dist/components/ui/multi-select/index.d.ts

@@ -0,0 +1,3 @@
+export { MultiSelect, multiSelectTriggerVariants, multiSelectVariantIds, multiSelectSizeIds, multiSelectBadgeVariantIds, } from "./multi-select";
+export type * from "./multi-select";
+export { MultiSelect as default } from "./multi-select";

package/dist/components/ui/multi-select/index.js

@@ -0,0 +1,3 @@
+export { MultiSelect, multiSelectTriggerVariants, multiSelectVariantIds, multiSelectSizeIds, multiSelectBadgeVariantIds, } from "./multi-select";
+export { MultiSelect as default } from "./multi-select";
+//# sourceMappingURL=index.js.map

package/dist/components/ui/multi-select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ui/multi-select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,0BAA0B,EAC1B,qBAAqB,EACrB,kBAAkB,EAClB,0BAA0B,GAC3B,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,WAAW,IAAI,OAAO,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/ui/multi-select/multi-select.d.ts

@@ -0,0 +1,48 @@
+import { type ButtonHTMLAttributes, type ReactElement, type ReactNode, type Ref } from "react";
+import { type VariantProps } from "class-variance-authority";
+export declare const multiSelectVariantIds: readonly ["default", "outline", "ghost"];
+export type MultiSelectVariantId = (typeof multiSelectVariantIds)[number];
+export declare const multiSelectSizeIds: readonly ["sm", "default", "lg"];
+export type MultiSelectSizeId = (typeof multiSelectSizeIds)[number];
+export declare const multiSelectBadgeVariantIds: readonly ["default", "secondary", "outline", "destructive"];
+export type MultiSelectBadgeVariantId = (typeof multiSelectBadgeVariantIds)[number];
+export declare const multiSelectTriggerVariants: (props?: ({
+    variant?: "default" | "outline" | "ghost" | null | undefined;
+    size?: "sm" | "default" | "lg" | null | undefined;
+    fullWidth?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface MultiSelectOption {
+    value: string;
+    label: string;
+    description?: string;
+    keywords?: readonly string[];
+    disabled?: boolean;
+    icon?: ReactNode;
+}
+export interface MultiSelectProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value" | "defaultValue" | "onChange">, VariantProps<typeof multiSelectTriggerVariants> {
+    options: readonly MultiSelectOption[];
+    value?: readonly string[];
+    defaultValue?: readonly string[];
+    onValueChange?: (value: readonly string[]) => void;
+    placeholder?: ReactNode;
+    searchPlaceholder?: string;
+    emptyMessage?: ReactNode;
+    contentClassName?: string;
+    triggerClassName?: string;
+    badgeClassName?: string;
+    badgeVariant?: MultiSelectBadgeVariantId;
+    /** Maximum number of selected items rendered as badges before a +N overflow chip. */
+    maxDisplay?: number;
+    /** Maximum number of items the user may select. Further selections become no-ops. */
+    maxSelected?: number;
+    clearable?: boolean;
+    disabled?: boolean;
+    /** Close the popover after each selection. Defaults to false (multi-pick mode). */
+    closeOnSelect?: boolean;
+    align?: "start" | "center" | "end";
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare function MultiSelect({ options, value: controlledValue, defaultValue, onValueChange, placeholder, searchPlaceholder, emptyMessage, variant, size, fullWidth, contentClassName, triggerClassName, badgeClassName, badgeVariant, className, maxDisplay, maxSelected, clearable, disabled, closeOnSelect, align, ref, ...buttonProps }: MultiSelectProps): ReactElement;
+export declare namespace MultiSelect {
+    var displayName: string;
+}

package/dist/components/ui/multi-select/multi-select.js

@@ -0,0 +1,153 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useId, useMemo, useState, } from "react";
+import { cva } from "class-variance-authority";
+import { Check, ChevronsUpDown, X } from "lucide-react";
+import { cn } from "../../../lib/utils";
+import { Badge } from "../../ui/badge";
+import { Popover, PopoverContent, PopoverTrigger, } from "../../ui/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, } from "../../ui/command";
+export const multiSelectVariantIds = [
+    "default",
+    "outline",
+    "ghost",
+];
+export const multiSelectSizeIds = [
+    "sm",
+    "default",
+    "lg",
+];
+export const multiSelectBadgeVariantIds = [
+    "default",
+    "secondary",
+    "outline",
+    "destructive",
+];
+export const multiSelectTriggerVariants = cva("group/trigger inline-flex min-h-10 items-center justify-between gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[placeholder=true]:text-muted-foreground", {
+    variants: {
+        variant: {
+            default: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+            outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+            ghost: "border border-transparent bg-transparent hover:bg-accent hover:text-accent-foreground",
+        },
+        size: {
+            sm: "min-h-8 px-2 py-1 text-xs",
+            default: "min-h-10 px-3 py-1.5 text-sm",
+            lg: "min-h-11 px-4 py-2 text-base",
+        },
+        fullWidth: {
+            true: "w-full",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+        fullWidth: false,
+    },
+});
+function arraysHaveSameValues(a, b) {
+    if (a.length !== b.length)
+        return false;
+    const set = new Set(a);
+    for (const value of b) {
+        if (!set.has(value))
+            return false;
+    }
+    return true;
+}
+export function MultiSelect({ options, value: controlledValue, defaultValue, onValueChange, placeholder = "Select options...", searchPlaceholder = "Search...", emptyMessage = "No results found.", variant, size, fullWidth, contentClassName, triggerClassName, badgeClassName, badgeVariant = "secondary", className, maxDisplay, maxSelected, clearable = false, disabled = false, closeOnSelect = false, align = "start", ref, ...buttonProps }) {
+    const reactId = useId();
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? []);
+    const [open, setOpen] = useState(false);
+    const isControlled = controlledValue !== undefined;
+    const selectedValues = isControlled
+        ? controlledValue
+        : uncontrolledValue;
+    const selectedSet = useMemo(() => new Set(selectedValues), [selectedValues]);
+    const selectedOptions = useMemo(() => selectedValues
+        .map((selectedValue) => options.find((option) => option.value === selectedValue))
+        .filter((option) => option !== undefined), [options, selectedValues]);
+    const commitValue = useCallback((next) => {
+        if (arraysHaveSameValues(next, selectedValues))
+            return;
+        if (!isControlled) {
+            setUncontrolledValue(next);
+        }
+        onValueChange?.(next);
+    }, [isControlled, onValueChange, selectedValues]);
+    const handleToggle = useCallback((next) => {
+        const isSelected = selectedSet.has(next);
+        let nextValues;
+        if (isSelected) {
+            nextValues = selectedValues.filter((v) => v !== next);
+        }
+        else {
+            if (maxSelected !== undefined &&
+                selectedValues.length >= maxSelected) {
+                return;
+            }
+            nextValues = [...selectedValues, next];
+        }
+        commitValue(nextValues);
+        if (closeOnSelect) {
+            setOpen(false);
+        }
+    }, [closeOnSelect, commitValue, maxSelected, selectedSet, selectedValues]);
+    const handleClearAll = useCallback((event) => {
+        event?.stopPropagation();
+        event?.preventDefault();
+        commitValue([]);
+    }, [commitValue]);
+    const handleRemoveBadge = useCallback((event, optionValue) => {
+        event.stopPropagation();
+        event.preventDefault();
+        commitValue(selectedValues.filter((v) => v !== optionValue));
+    }, [commitValue, selectedValues]);
+    const visibleSelected = useMemo(() => {
+        if (maxDisplay === undefined)
+            return selectedOptions;
+        return selectedOptions.slice(0, maxDisplay);
+    }, [maxDisplay, selectedOptions]);
+    const overflowCount = useMemo(() => {
+        if (maxDisplay === undefined)
+            return 0;
+        return Math.max(0, selectedOptions.length - maxDisplay);
+    }, [maxDisplay, selectedOptions.length]);
+    const showClearControl = clearable && !disabled && selectedValues.length > 0;
+    const isLimitReached = maxSelected !== undefined && selectedValues.length >= maxSelected;
+    const hasSelection = selectedValues.length > 0;
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { ref: ref, type: "button", role: "combobox", "aria-expanded": open, "aria-haspopup": "listbox", "aria-controls": `${reactId}-listbox`, "data-placeholder": hasSelection ? "false" : "true", disabled: disabled, className: cn(multiSelectTriggerVariants({ variant, size, fullWidth }), triggerClassName, className), ...buttonProps, children: [_jsx("span", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1 text-left", children: hasSelection ? (_jsxs(_Fragment, { children: [visibleSelected.map((option) => (_jsxs(Badge, { variant: badgeVariant, className: cn("max-w-full gap-1 pr-1", badgeClassName), children: [option.icon ? (_jsx("span", { className: "inline-flex shrink-0 items-center", "aria-hidden": "true", children: option.icon })) : null, _jsx("span", { className: "truncate", children: option.label }), !disabled ? (_jsx("span", { role: "button", tabIndex: -1, "aria-label": `Remove ${option.label}`, onClick: (event) => handleRemoveBadge(event, option.value), onPointerDown: (event) => {
+                                                    event.stopPropagation();
+                                                }, onKeyDown: (event) => {
+                                                    if (event.key === "Enter" || event.key === " ") {
+                                                        event.preventDefault();
+                                                        event.stopPropagation();
+                                                        handleRemoveBadge(event, option.value);
+                                                    }
+                                                }, className: "-mr-0.5 ml-0.5 inline-flex h-4 w-4 cursor-pointer items-center justify-center rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", children: _jsx(X, { className: "h-3 w-3", "aria-hidden": "true" }) })) : null] }, option.value))), overflowCount > 0 ? (_jsxs(Badge, { variant: "outline", className: cn("font-medium", badgeClassName), children: ["+", overflowCount, " more"] })) : null] })) : (_jsx("span", { className: "truncate text-muted-foreground", children: placeholder })) }), _jsxs("span", { className: "ml-2 flex shrink-0 items-center gap-1", children: [showClearControl ? (_jsx("span", { role: "button", tabIndex: -1, "aria-label": "Clear all selected", onClick: handleClearAll, onPointerDown: (event) => {
+                                        event.stopPropagation();
+                                    }, onKeyDown: (event) => {
+                                        if (event.key === "Enter" || event.key === " ") {
+                                            event.preventDefault();
+                                            event.stopPropagation();
+                                            handleClearAll();
+                                        }
+                                    }, className: "inline-flex h-4 w-4 cursor-pointer items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", children: _jsx(X, { className: "h-4 w-4", "aria-hidden": "true" }) })) : null, _jsx(ChevronsUpDown, { className: "h-4 w-4 opacity-50", "aria-hidden": "true" })] })] }) }), _jsx(PopoverContent, { align: align, className: cn("w-[var(--radix-popover-trigger-width)] min-w-[12rem] p-0", contentClassName), children: _jsxs(Command, { id: `${reactId}-listbox`, children: [_jsx(CommandInput, { placeholder: searchPlaceholder }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: emptyMessage }), showClearControl ? (_jsxs(_Fragment, { children: [_jsx(CommandGroup, { children: _jsxs(CommandItem, { value: "__multi_select_clear__", keywords: ["clear", "reset", "none"], onSelect: () => {
+                                                    handleClearAll();
+                                                }, className: "cursor-pointer gap-2 text-muted-foreground", children: [_jsx(X, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }), _jsx("span", { children: "Clear selection" }), _jsx("span", { className: "ml-auto text-xs", children: selectedValues.length })] }) }), _jsx(CommandSeparator, {})] })) : null, _jsx(CommandGroup, { children: options.map((option) => {
+                                        const isSelected = selectedSet.has(option.value);
+                                        const keywords = [
+                                            option.label,
+                                            ...(option.keywords ?? []),
+                                        ];
+                                        const itemDisabled = option.disabled || (!isSelected && isLimitReached);
+                                        return (_jsxs(CommandItem, { value: option.value, keywords: keywords, disabled: itemDisabled, onSelect: (currentValue) => {
+                                                handleToggle(currentValue);
+                                            }, className: "cursor-pointer gap-2", children: [_jsx("span", { className: cn("flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border", isSelected
+                                                        ? "border-primary bg-primary text-primary-foreground"
+                                                        : "border-input bg-transparent"), "aria-hidden": "true", children: _jsx(Check, { className: cn("h-3 w-3", isSelected ? "opacity-100" : "opacity-0") }) }), option.icon ? (_jsx("span", { className: "inline-flex shrink-0 items-center", "aria-hidden": "true", children: option.icon })) : null, _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "truncate", children: option.label }), option.description ? (_jsx("span", { className: "truncate text-xs text-muted-foreground", children: option.description })) : null] })] }, option.value));
+                                    }) }), maxSelected !== undefined ? (_jsxs("div", { className: "border-t px-3 py-1.5 text-xs text-muted-foreground", children: [selectedValues.length, " / ", maxSelected, " selected"] })) : null] })] }) })] }));
+}
+MultiSelect.displayName = "MultiSelect";
+//# sourceMappingURL=multi-select.js.map

package/dist/components/ui/multi-select/multi-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-select.js","sourceRoot":"","sources":["../../../../src/components/ui/multi-select/multi-select.tsx"],"names":[],"mappings":"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"}

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.77.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",