@voyantjs/ui 0.6.7

package/dist/components/toggle.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils";
+const toggleVariants = cva("group/toggle inline-flex items-center justify-center gap-1 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+    variants: {
+        variant: {
+            default: "bg-transparent",
+            outline: "border border-input bg-transparent shadow-xs hover:bg-muted",
+        },
+        size: {
+            default: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+            sm: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+            lg: "h-10 min-w-10 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+function Toggle({ className, variant = "default", size = "default", ...props }) {
+    return (_jsx(TogglePrimitive, { "data-slot": "toggle", className: cn(toggleVariants({ variant, size, className })), ...props }));
+}
+export { Toggle, toggleVariants };

package/dist/components/tooltip.d.ts

@@ -0,0 +1,7 @@
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+declare function TooltipProvider({ delay, ...props }: TooltipPrimitive.Provider.Props): import("react/jsx-runtime").JSX.Element;
+declare function Tooltip({ ...props }: TooltipPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
+declare function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
+declare function TooltipContent({ className, side, sideOffset, align, alignOffset, children, ...props }: TooltipPrimitive.Popup.Props & Pick<TooltipPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): import("react/jsx-runtime").JSX.Element;
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/components/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/components/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AAIpE,iBAAS,eAAe,CAAC,EAAE,KAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,QAAQ,CAAC,KAAK,2CAEhF;AAED,iBAAS,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,KAAK,2CAEzD;AAED,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,OAAO,CAAC,KAAK,2CAEnE;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,IAAY,EACZ,UAAc,EACd,KAAgB,EAChB,WAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAK,GAC7B,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,CAAC,2CAwBzF;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/tooltip.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+import { cn } from "../lib/utils";
+function TooltipProvider({ delay = 0, ...props }) {
+    return _jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delay: delay, ...props });
+}
+function Tooltip({ ...props }) {
+    return _jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
+}
+function TooltipTrigger({ ...props }) {
+    return _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }) {
+    return (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: "isolate z-50", children: _jsxs(TooltipPrimitive.Popup, { "data-slot": "tooltip-content", className: cn("z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: [children, _jsx(TooltipPrimitive.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" })] }) }) }));
+}
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/components/typography.d.ts

@@ -0,0 +1,18 @@
+import type * as React from "react";
+declare function TypographyH1({ className, ...props }: React.ComponentProps<"h1">): import("react/jsx-runtime").JSX.Element;
+declare function TypographyH2({ className, ...props }: React.ComponentProps<"h2">): import("react/jsx-runtime").JSX.Element;
+declare function TypographyH3({ className, ...props }: React.ComponentProps<"h3">): import("react/jsx-runtime").JSX.Element;
+declare function TypographyH4({ className, ...props }: React.ComponentProps<"h4">): import("react/jsx-runtime").JSX.Element;
+declare function TypographyP({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
+declare function TypographyBlockquote({ className, ...props }: React.ComponentProps<"blockquote">): import("react/jsx-runtime").JSX.Element;
+declare function TypographyUl({ className, ...props }: React.ComponentProps<"ul">): import("react/jsx-runtime").JSX.Element;
+declare function TypographyOl({ className, ...props }: React.ComponentProps<"ol">): import("react/jsx-runtime").JSX.Element;
+declare function TypographyInlineCode({ className, ...props }: React.ComponentProps<"code">): import("react/jsx-runtime").JSX.Element;
+declare function TypographyLead({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
+declare function TypographyLarge({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function TypographySmall({ className, ...props }: React.ComponentProps<"small">): import("react/jsx-runtime").JSX.Element;
+declare function TypographyMuted({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
+declare function TypographyTableWrapper({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function TypographyTable({ className, ...props }: React.ComponentProps<"table">): import("react/jsx-runtime").JSX.Element;
+export { TypographyBlockquote, TypographyH1, TypographyH2, TypographyH3, TypographyH4, TypographyInlineCode, TypographyLarge, TypographyLead, TypographyMuted, TypographyOl, TypographyP, TypographySmall, TypographyTable, TypographyTableWrapper, TypographyUl, };
+//# sourceMappingURL=typography.d.ts.map

package/dist/components/typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../src/components/typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAInC,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAUxE;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAUxE;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAOxE;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAOxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,2CAEtE;AAED,iBAAS,oBAAoB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,2CAOxF;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAExE;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAExE;AAED,iBAAS,oBAAoB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAUlF;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,2CAEzE;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAE5E;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAE9E;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,2CAE1E;AAED,iBAAS,sBAAsB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAEnF;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAE9E;AAED,OAAO,EACL,oBAAoB,EACpB,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,oBAAoB,EACpB,eAAe,EACf,cAAc,EACd,eAAe,EACf,YAAY,EACZ,WAAW,EACX,eAAe,EACf,eAAe,EACf,sBAAsB,EACtB,YAAY,GACb,CAAA"}

package/dist/components/typography.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils";
+function TypographyH1({ className, ...props }) {
+    return (_jsx("h1", { className: cn("scroll-m-20 font-heading text-4xl font-extrabold tracking-tight text-balance", className), ...props }));
+}
+function TypographyH2({ className, ...props }) {
+    return (_jsx("h2", { className: cn("scroll-m-20 border-b pb-2 font-heading text-3xl font-semibold tracking-tight first:mt-0", className), ...props }));
+}
+function TypographyH3({ className, ...props }) {
+    return (_jsx("h3", { className: cn("scroll-m-20 font-heading text-2xl font-semibold tracking-tight", className), ...props }));
+}
+function TypographyH4({ className, ...props }) {
+    return (_jsx("h4", { className: cn("scroll-m-20 font-heading text-xl font-semibold tracking-tight", className), ...props }));
+}
+function TypographyP({ className, ...props }) {
+    return _jsx("p", { className: cn("leading-7 [&:not(:first-child)]:mt-6", className), ...props });
+}
+function TypographyBlockquote({ className, ...props }) {
+    return (_jsx("blockquote", { className: cn("mt-6 border-l-2 pl-6 italic text-muted-foreground", className), ...props }));
+}
+function TypographyUl({ className, ...props }) {
+    return _jsx("ul", { className: cn("my-6 ml-6 list-disc [&>li]:mt-2", className), ...props });
+}
+function TypographyOl({ className, ...props }) {
+    return _jsx("ol", { className: cn("my-6 ml-6 list-decimal [&>li]:mt-2", className), ...props });
+}
+function TypographyInlineCode({ className, ...props }) {
+    return (_jsx("code", { className: cn("relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold", className), ...props }));
+}
+function TypographyLead({ className, ...props }) {
+    return _jsx("p", { className: cn("text-xl text-muted-foreground", className), ...props });
+}
+function TypographyLarge({ className, ...props }) {
+    return _jsx("div", { className: cn("text-lg font-semibold", className), ...props });
+}
+function TypographySmall({ className, ...props }) {
+    return _jsx("small", { className: cn("text-sm leading-none font-medium", className), ...props });
+}
+function TypographyMuted({ className, ...props }) {
+    return _jsx("p", { className: cn("text-sm text-muted-foreground", className), ...props });
+}
+function TypographyTableWrapper({ className, ...props }) {
+    return _jsx("div", { className: cn("my-6 w-full overflow-y-auto", className), ...props });
+}
+function TypographyTable({ className, ...props }) {
+    return _jsx("table", { className: cn("w-full", className), ...props });
+}
+export { TypographyBlockquote, TypographyH1, TypographyH2, TypographyH3, TypographyH4, TypographyInlineCode, TypographyLarge, TypographyLead, TypographyMuted, TypographyOl, TypographyP, TypographySmall, TypographyTable, TypographyTableWrapper, TypographyUl, };

package/dist/hooks/use-mobile.d.ts

@@ -0,0 +1,2 @@
+export declare function useIsMobile(): boolean;
+//# sourceMappingURL=use-mobile.d.ts.map

package/dist/hooks/use-mobile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mobile.d.ts","sourceRoot":"","sources":["../../src/hooks/use-mobile.ts"],"names":[],"mappings":"AAIA,wBAAgB,WAAW,YAc1B"}

package/dist/hooks/use-mobile.js

@@ -0,0 +1,15 @@
+import * as React from "react";
+const MOBILE_BREAKPOINT = 768;
+export function useIsMobile() {
+    const [isMobile, setIsMobile] = React.useState(undefined);
+    React.useEffect(() => {
+        const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+        const onChange = () => {
+            setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        };
+        mql.addEventListener("change", onChange);
+        setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        return () => mql.removeEventListener("change", onChange);
+    }, []);
+    return !!isMobile;
+}

package/dist/lib/crop-image.d.ts

@@ -0,0 +1,4 @@
+import type { Area } from "react-easy-crop";
+declare const getCroppedImg: (imageSrc: string, pixelCrop: Area) => Promise<Blob>;
+export default getCroppedImg;
+//# sourceMappingURL=crop-image.d.ts.map

package/dist/lib/crop-image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"crop-image.d.ts","sourceRoot":"","sources":["../../src/lib/crop-image.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAA;AAW3C,QAAA,MAAM,aAAa,GAAU,UAAU,MAAM,EAAE,WAAW,IAAI,KAAG,OAAO,CAAC,IAAI,CAkC5E,CAAA;AAED,eAAe,aAAa,CAAA"}

package/dist/lib/crop-image.js

@@ -0,0 +1,30 @@
+const createImage = (url) => new Promise((resolve, reject) => {
+    const image = new Image();
+    image.addEventListener("load", () => resolve(image));
+    image.addEventListener("error", (error) => reject(error));
+    image.setAttribute("crossOrigin", "anonymous"); // to avoid CORS issues
+    image.src = url;
+});
+const getCroppedImg = async (imageSrc, pixelCrop) => {
+    const image = await createImage(imageSrc);
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+        throw new Error("Could not get canvas context");
+    }
+    canvas.width = pixelCrop.width;
+    canvas.height = pixelCrop.height;
+    ctx.drawImage(image, pixelCrop.x, pixelCrop.y, pixelCrop.width, pixelCrop.height, 0, 0, pixelCrop.width, pixelCrop.height);
+    return new Promise((resolve, reject) => {
+        // Export as PNG to preserve transparency for logos
+        canvas.toBlob((blob) => {
+            if (blob) {
+                resolve(blob);
+            }
+            else {
+                reject(new Error("Canvas is empty"));
+            }
+        }, "image/png");
+    });
+};
+export default getCroppedImg;

package/dist/lib/utils.d.ts

@@ -0,0 +1,3 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/lib/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAA;AAG5C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/dist/lib/utils.js

@@ -0,0 +1,5 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/lib/zod-resolver.d.ts

@@ -0,0 +1,4 @@
+import type { FieldValues, Resolver } from "react-hook-form";
+import type { z } from "zod/v4";
+export declare function zodResolver<TSchema extends z.ZodType<FieldValues, FieldValues>>(schema: TSchema): Resolver<z.input<TSchema>, unknown, z.output<TSchema>>;
+//# sourceMappingURL=zod-resolver.d.ts.map

package/dist/lib/zod-resolver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"zod-resolver.d.ts","sourceRoot":"","sources":["../../src/lib/zod-resolver.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,WAAW,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AACzE,OAAO,KAAK,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAA;AA+B/B,wBAAgB,WAAW,CAAC,OAAO,SAAS,CAAC,CAAC,OAAO,CAAC,WAAW,EAAE,WAAW,CAAC,EAC7E,MAAM,EAAE,OAAO,GACd,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CA6BxD"}

package/dist/lib/zod-resolver.js

@@ -0,0 +1,39 @@
+function setFieldError(target, path, error) {
+    let current = target;
+    for (let index = 0; index < path.length; index += 1) {
+        const key = String(path[index] ?? "root");
+        if (index === path.length - 1) {
+            current[key] = error;
+            return;
+        }
+        const next = current[key];
+        if (typeof next !== "object" || next === null) {
+            current[key] = {};
+        }
+        current = current[key];
+    }
+}
+export function zodResolver(schema) {
+    return async (values) => {
+        const result = await schema.safeParseAsync(values);
+        if (result.success) {
+            return {
+                values: result.data,
+                errors: {},
+            };
+        }
+        const errors = {};
+        for (const issue of result.error.issues) {
+            const path = issue.path.filter((segment) => typeof segment !== "symbol");
+            const normalizedPath = path.length > 0 ? path : ["root"];
+            setFieldError(errors, normalizedPath, {
+                type: issue.code,
+                message: issue.message,
+            });
+        }
+        return {
+            values: {},
+            errors: errors,
+        };
+    };
+}

package/package.json

@@ -0,0 +1,108 @@
+{
+  "name": "@voyantjs/ui",
+  "version": "0.6.7",
+  "license": "FSL-1.1-Apache-2.0",
+  "type": "module",
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "clean": "rm -rf dist",
+    "prepack": "pnpm run build",
+    "typecheck": "tsc --noEmit",
+    "lint": "biome check registry/",
+    "registry:build": "pnpm -C ../.. registry:build"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.3.0",
+    "@hookform/resolvers": "^5.1.1",
+    "@tanstack/react-table": "^8.21.3",
+    "@voyantjs/notifications": "workspace:*",
+    "@voyantjs/notifications-react": "workspace:*",
+    "@voyantjs/utils": "workspace:*",
+    "@tiptap/core": "^3.7.2",
+    "@tiptap/extensions": "^3.7.2",
+    "@tiptap/pm": "^3.7.2",
+    "@tiptap/react": "^3.7.2",
+    "@tiptap/starter-kit": "^3.7.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.475.0",
+    "next-themes": "^0.4.6",
+    "react": "^19.1.0",
+    "react-colorful": "5.6.1",
+    "react-day-picker": "^9.8.0",
+    "react-dom": "^19.1.0",
+    "react-easy-crop": "^5.5.0",
+    "react-hook-form": "^7.60.0",
+    "react-phone-number-input": "^3.4.12",
+    "react-resizable-panels": "^3.0.3",
+    "recharts": "3.8.0",
+    "sonner": "^2.0.6",
+    "tailwind-merge": "^3.3.1",
+    "tw-animate-css": "^1.3.5",
+    "vaul": "^1.1.2",
+    "zod": "^3.25.76"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.11",
+    "@types/node": "^20.19.8",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@voyantjs/voyant-typescript-config": "workspace:*",
+    "tailwindcss": "^4.1.11",
+    "typescript": "^5.8.3"
+  },
+  "exports": {
+    "./globals.css": "./src/styles/globals.css",
+    "./postcss.config": "./postcss.config.mjs",
+    "./lib/*": "./src/lib/*.ts",
+    "./components": "./src/components/index.tsx",
+    "./components/*": "./src/components/*.tsx",
+    "./components/notification-template-dialog": "./src/components/notification-template-dialog.tsx",
+    "./components/notification-templates-page": "./src/components/notification-templates-page.tsx",
+    "./components/notification-reminder-rule-dialog": "./src/components/notification-reminder-rule-dialog.tsx",
+    "./components/notification-reminder-rules-page": "./src/components/notification-reminder-rules-page.tsx",
+    "./components/notification-deliveries-page": "./src/components/notification-deliveries-page.tsx",
+    "./components/notification-reminder-runs-page": "./src/components/notification-reminder-runs-page.tsx",
+    "./components/notification-template-authoring-help": "./src/components/notification-template-authoring-help.tsx",
+    "./components/rich-text-variable-extension": "./src/components/rich-text-variable-extension.ts",
+    "./hooks/*": "./src/hooks/*.ts"
+  },
+  "files": [
+    "dist",
+    "src/styles",
+    "postcss.config.mjs"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "exports": {
+      "./globals.css": "./src/styles/globals.css",
+      "./postcss.config": "./postcss.config.mjs",
+      "./lib/*": {
+        "types": "./dist/lib/*.d.ts",
+        "import": "./dist/lib/*.js"
+      },
+      "./components": {
+        "types": "./dist/components/index.d.ts",
+        "import": "./dist/components/index.js"
+      },
+      "./components/*": {
+        "types": "./dist/components/*.d.ts",
+        "import": "./dist/components/*.js"
+      },
+      "./hooks/*": {
+        "types": "./dist/hooks/*.d.ts",
+        "import": "./dist/hooks/*.js"
+      }
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/voyantjs/voyant.git",
+    "directory": "packages/ui"
+  }
+}

package/postcss.config.mjs

@@ -0,0 +1,6 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: { "@tailwindcss/postcss": {} },
+}
+
+export default config

package/src/styles/globals.css

@@ -0,0 +1,157 @@
+@import "tailwindcss";
+@source "../../../apps/**/*.{ts,tsx}";
+@source "../../../components/**/*.{ts,tsx}";
+@source "../**/*.{ts,tsx}";
+
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: oklch(0.97 0 0);
+  --foreground: oklch(0.09 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.09 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.09 0 0);
+  --primary: oklch(0.15 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.945 0 0);
+  --secondary-foreground: oklch(0.15 0 0);
+  --muted: oklch(0.93 0 0);
+  --muted-foreground: oklch(0.45 0 0);
+  --accent: oklch(0.945 0 0);
+  --accent-foreground: oklch(0.15 0 0);
+  --destructive: oklch(0.55 0.22 27);
+  --destructive-foreground: oklch(0.985 0 0);
+  --success: oklch(0.72 0.19 160);
+  --success-foreground: oklch(0.18 0 0);
+  --warning: oklch(0.8 0.15 85);
+  --warning-foreground: oklch(0.25 0 0);
+  --info: oklch(0.62 0.14 240);
+  --info-foreground: oklch(0.2 0 0);
+  --border: oklch(0.91 0 0);
+  --input: oklch(0.91 0 0);
+  --ring: oklch(0.15 0 0);
+  --chart-1: oklch(0.15 0 0);
+  --chart-2: oklch(0.72 0.19 160);
+  --chart-3: oklch(0.55 0 0);
+  --chart-4: oklch(0.8 0.15 85);
+  --chart-5: oklch(0.42 0.25 270);
+  --radius: 0.75rem;
+  --sidebar: oklch(1 0 0);
+  --sidebar-foreground: oklch(0.09 0 0);
+  --sidebar-primary: oklch(0.15 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.945 0 0);
+  --sidebar-accent-foreground: oklch(0.15 0 0);
+  --sidebar-border: oklch(0.93 0 0);
+  --sidebar-ring: oklch(0.15 0 0);
+}
+
+.dark {
+  --background: oklch(0.1 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.14 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.14 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.09 0 0);
+  --secondary: oklch(0.18 0 0);
+  --secondary-foreground: oklch(0.9 0 0);
+  --muted: oklch(0.18 0 0);
+  --muted-foreground: oklch(0.6 0 0);
+  --accent: oklch(0.18 0 0);
+  --accent-foreground: oklch(0.9 0 0);
+  --destructive: oklch(0.55 0.2 27);
+  --destructive-foreground: oklch(0.985 0 0);
+  --success: oklch(0.72 0.19 160);
+  --success-foreground: oklch(0.9 0 0);
+  --warning: oklch(0.8 0.15 85);
+  --warning-foreground: oklch(0.9 0 0);
+  --info: oklch(0.62 0.14 240);
+  --info-foreground: oklch(0.88 0 0);
+  --border: oklch(0.22 0 0);
+  --input: oklch(0.22 0 0);
+  --ring: oklch(0.985 0 0);
+  --chart-1: oklch(0.985 0 0);
+  --chart-2: oklch(0.72 0.19 160);
+  --chart-3: oklch(0.6 0 0);
+  --chart-4: oklch(0.8 0.15 85);
+  --chart-5: oklch(0.42 0.25 270);
+  --sidebar: oklch(0.12 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.985 0 0);
+  --sidebar-primary-foreground: oklch(0.09 0 0);
+  --sidebar-accent: oklch(0.18 0 0);
+  --sidebar-accent-foreground: oklch(0.9 0 0);
+  --sidebar-border: oklch(0.2 0 0);
+  --sidebar-ring: oklch(0.985 0 0);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground antialiased;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    letter-spacing: -0.025em;
+  }
+  .font-data {
+    font-variant-numeric: tabular-nums lining-nums;
+    letter-spacing: -0.01em;
+  }
+}