@alpic-ai/ui 0.0.0-dev.g37dab1d → 0.0.0-dev.g380fab7

package/dist/components/dropdown-menu.d.mts

@@ -1,25 +1,25 @@
 import { VariantProps } from "class-variance-authority";
-import * as React from "react";
+import * as React$1 from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 
 //#region src/components/dropdown-menu.d.ts
 declare function DropdownMenu({
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+}: React$1.ComponentProps<typeof DropdownMenuPrimitive.Root>): React$1.JSX.Element;
 declare function DropdownMenuPortal({
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+}: React$1.ComponentProps<typeof DropdownMenuPrimitive.Portal>): React$1.JSX.Element;
 declare function DropdownMenuTrigger({
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+}: React$1.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): React$1.JSX.Element;
 declare function DropdownMenuContent({
   className,
   sideOffset,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+}: React$1.ComponentProps<typeof DropdownMenuPrimitive.Content>): React$1.JSX.Element;
 declare function DropdownMenuGroup({
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+}: React$1.ComponentProps<typeof DropdownMenuPrimitive.Group>): React$1.JSX.Element;
 declare const dropdownMenuItemVariants: (props?: ({
   variant?: "default" | "destructive" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -28,43 +28,43 @@ declare function DropdownMenuItem({
   inset,
   variant,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & VariantProps<typeof dropdownMenuItemVariants> & {
+}: React$1.ComponentProps<typeof DropdownMenuPrimitive.Item> & VariantProps<typeof dropdownMenuItemVariants> & {
   inset?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
+}): React$1.JSX.Element;
 declare function DropdownMenuLabel({
   className,
   inset,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+}: React$1.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
   inset?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
+}): React$1.JSX.Element;
 declare function DropdownMenuHeader({
   className,
   children,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+}: React$1.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
 declare function DropdownMenuSeparator({
   className,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+}: React$1.ComponentProps<typeof DropdownMenuPrimitive.Separator>): React$1.JSX.Element;
 declare function DropdownMenuShortcut({
   className,
   ...props
-}: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+}: React$1.ComponentProps<"span">): React$1.JSX.Element;
 declare function DropdownMenuSub({
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>): import("react/jsx-runtime").JSX.Element;
+}: React$1.ComponentProps<typeof DropdownMenuPrimitive.Sub>): React$1.JSX.Element;
 declare function DropdownMenuSubTrigger({
   className,
   inset,
   children,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+}: React$1.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
   inset?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
+}): React$1.JSX.Element;
 declare function DropdownMenuSubContent({
   className,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): import("react/jsx-runtime").JSX.Element;
+}: React$1.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): React$1.JSX.Element;
 //#endregion
 export { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuHeader, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, dropdownMenuItemVariants };

package/dist/components/form.d.mts

@@ -1,7 +1,7 @@
 import { InputProps } from "./input.mjs";
 import { Label } from "./label.mjs";
 import { TextareaProps } from "./textarea.mjs";
-import * as React from "react";
+import * as React$1 from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { ControllerProps, FieldPath, FieldValues } from "react-hook-form";
 
@@ -25,10 +25,10 @@ declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransfor
   register,
   setFocus,
   subscribe
-}: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+}: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React$1.JSX.Element;
 declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({
   ...props
-}: ControllerProps<TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element;
+}: ControllerProps<TFieldValues, TName>) => React$1.JSX.Element;
 declare const useFormField: () => {
   invalid: boolean;
   isDirty: boolean;
@@ -44,8 +44,8 @@ declare const useFormField: () => {
 declare function FormItem({
   className,
   ...props
-}: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-interface FormLabelProps extends React.ComponentProps<typeof Label> {
+}: React$1.ComponentProps<"div">): React$1.JSX.Element;
+interface FormLabelProps extends React$1.ComponentProps<typeof Label> {
   required?: boolean;
   tooltip?: string;
 }
@@ -55,19 +55,19 @@ declare function FormLabel({
   tooltip,
   children,
   ...props
-}: FormLabelProps): import("react/jsx-runtime").JSX.Element;
+}: FormLabelProps): React$1.JSX.Element;
 declare function FormControl({
   ...props
-}: React.ComponentProps<typeof Slot>): import("react/jsx-runtime").JSX.Element;
+}: React$1.ComponentProps<typeof Slot>): React$1.JSX.Element;
 declare function FormDescription({
   className,
   ...props
-}: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
+}: React$1.ComponentProps<"p">): React$1.JSX.Element;
 declare function FormMessage({
   className,
   ...props
-}: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element | null;
-interface FormHeaderProps extends React.ComponentProps<"div"> {
+}: React$1.ComponentProps<"p">): React$1.JSX.Element | null;
+interface FormHeaderProps extends React$1.ComponentProps<"div"> {
   title: string;
   description?: string;
 }
@@ -76,11 +76,11 @@ declare function FormHeader({
   description,
   className,
   ...props
-}: FormHeaderProps): import("react/jsx-runtime").JSX.Element;
+}: FormHeaderProps): React$1.JSX.Element;
 declare function FormFields({
   className,
   ...props
-}: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+}: React$1.ComponentProps<"div">): React$1.JSX.Element;
 interface FormFieldBaseProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> {
   control: ControllerProps<TFieldValues, TName>["control"];
   name: TName;
@@ -100,7 +100,7 @@ declare function InputField<TFieldValues extends FieldValues, TName extends Fiel
   description,
   tooltip,
   ...inputProps
-}: InputFieldProps<TFieldValues, TName>): import("react/jsx-runtime").JSX.Element;
+}: InputFieldProps<TFieldValues, TName>): React$1.JSX.Element;
 interface TextareaFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> extends FormFieldBaseProps<TFieldValues, TName>, Omit<TextareaProps, "name" | "label"> {}
 declare function TextareaField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({
   control,
@@ -111,7 +111,7 @@ declare function TextareaField<TFieldValues extends FieldValues, TName extends F
   description,
   tooltip,
   ...textareaProps
-}: TextareaFieldProps<TFieldValues, TName>): import("react/jsx-runtime").JSX.Element;
+}: TextareaFieldProps<TFieldValues, TName>): React$1.JSX.Element;
 interface SelectFieldOption {
   value: string;
   label: string;
@@ -131,7 +131,7 @@ declare function SelectField<TFieldValues extends FieldValues, TName extends Fie
   tooltip,
   options,
   placeholder
-}: SelectFieldProps<TFieldValues, TName>): import("react/jsx-runtime").JSX.Element;
+}: SelectFieldProps<TFieldValues, TName>): React$1.JSX.Element;
 interface RadioFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> extends FormFieldBaseProps<TFieldValues, TName> {
   options: SelectFieldOption[];
 }
@@ -144,7 +144,7 @@ declare function RadioField<TFieldValues extends FieldValues, TName extends Fiel
   description,
   tooltip,
   options
-}: RadioFieldProps<TFieldValues, TName>): import("react/jsx-runtime").JSX.Element;
+}: RadioFieldProps<TFieldValues, TName>): React$1.JSX.Element;
 interface ChecklistFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> extends FormFieldBaseProps<TFieldValues, TName> {
   options: SelectFieldOption[];
 }
@@ -157,7 +157,7 @@ declare function ChecklistField<TFieldValues extends FieldValues, TName extends
   description,
   tooltip,
   options
-}: ChecklistFieldProps<TFieldValues, TName>): import("react/jsx-runtime").JSX.Element;
+}: ChecklistFieldProps<TFieldValues, TName>): React$1.JSX.Element;
 interface CheckboxFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> extends Omit<FormFieldBaseProps<TFieldValues, TName>, "required"> {}
 declare function CheckboxField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({
   control,
@@ -166,6 +166,6 @@ declare function CheckboxField<TFieldValues extends FieldValues, TName extends F
   label,
   description,
   tooltip
-}: CheckboxFieldProps<TFieldValues, TName>): import("react/jsx-runtime").JSX.Element;
+}: CheckboxFieldProps<TFieldValues, TName>): React$1.JSX.Element;
 //#endregion
 export { CheckboxField, ChecklistField, Form, FormControl, FormDescription, FormField, FormFields, FormHeader, FormItem, FormLabel, FormMessage, InputField, RadioField, SelectField, type SelectFieldOption, TextareaField, useFormField };

package/dist/components/form.mjs

@@ -9,12 +9,12 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from ".
 import { Textarea } from "./textarea.mjs";
 import { Info } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
+import * as React$1 from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { Controller, FormProvider, useFormContext, useFormState } from "react-hook-form";
 //#region src/components/form.tsx
 const Form = FormProvider;
-const FormFieldContext = React.createContext({});
+const FormFieldContext = React$1.createContext({});
 const FormField = ({ ...props }) => {
 	return /* @__PURE__ */ jsx(FormFieldContext.Provider, {
 		value: { name: props.name },
@@ -22,8 +22,8 @@ const FormField = ({ ...props }) => {
 	});
 };
 const useFormField = () => {
-	const fieldContext = React.useContext(FormFieldContext);
-	const itemContext = React.useContext(FormItemContext);
+	const fieldContext = React$1.useContext(FormFieldContext);
+	const itemContext = React$1.useContext(FormItemContext);
 	if (!fieldContext.name) throw new Error("useFormField should be used within <FormField>");
 	const { getFieldState } = useFormContext();
 	const formState = useFormState({ name: fieldContext.name });
@@ -38,9 +38,9 @@ const useFormField = () => {
 		...fieldState
 	};
 };
-const FormItemContext = React.createContext({});
+const FormItemContext = React$1.createContext({});
 function FormItem({ className, ...props }) {
-	const id = React.useId();
+	const id = React$1.useId();
 	return /* @__PURE__ */ jsx(FormItemContext.Provider, {
 		value: { id },
 		children: /* @__PURE__ */ jsx("div", {

package/dist/components/github-button.d.mts

@@ -7,6 +7,6 @@ declare function GitHubButton({
   className,
   children,
   ...props
-}: GitHubButtonProps): import("react/jsx-runtime").JSX.Element;
+}: GitHubButtonProps): import("react").JSX.Element;
 //#endregion
 export { GitHubButton, type GitHubButtonProps };

package/dist/components/grid-fx.d.mts

@@ -0,0 +1,13 @@
+import * as React$1 from "react";
+
+//#region src/components/grid-fx.d.ts
+declare function GridFx({
+  className,
+  cellSize,
+  style,
+  ...props
+}: React$1.ComponentProps<"canvas"> & {
+  cellSize?: number;
+}): React$1.JSX.Element | null;
+//#endregion
+export { GridFx };

package/dist/components/grid-fx.mjs

@@ -0,0 +1,188 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { useReducedMotion } from "../hooks/use-reduced-motion.mjs";
+import { jsx } from "react/jsx-runtime";
+import * as React$1 from "react";
+//#region src/components/grid-fx.tsx
+const CELL_SIZE = 46;
+const TTL_MIN = 42;
+const TTL_MAX = 78;
+const SPAWN_MIN = 180;
+const SPAWN_MAX = 480;
+const rand = (min, max) => min + Math.random() * (max - min);
+function resolveColors(element) {
+	const styles = getComputedStyle(element);
+	return {
+		color: styles.getPropertyValue("--color-primary").trim() || "#e90060",
+		colorHi: styles.getPropertyValue("--color-primary-hover").trim() || "#f22b79"
+	};
+}
+function strokeFull(ctx, horiz, at, width, height) {
+	ctx.beginPath();
+	if (horiz) {
+		ctx.moveTo(0, at);
+		ctx.lineTo(width, at);
+	} else {
+		ctx.moveTo(at, 0);
+		ctx.lineTo(at, height);
+	}
+	ctx.stroke();
+}
+function drawGlitchLine(ctx, line, width, height) {
+	const { horiz, at, color, colorHi } = line;
+	const span = horiz ? width : height;
+	const progress = line.life / line.ttl;
+	const envelope = progress < .08 ? progress / .08 : 1 - (progress - .08) / .92;
+	const base = Math.max(0, envelope);
+	ctx.lineCap = "round";
+	const ghosts = [
+		{
+			offset: 0,
+			alpha: .85,
+			blur: 12
+		},
+		{
+			offset: rand(-3, 3),
+			alpha: .35,
+			blur: 0
+		},
+		{
+			offset: rand(-7, 7),
+			alpha: .2,
+			blur: 0
+		}
+	];
+	for (const ghost of ghosts) {
+		ctx.globalAlpha = base * ghost.alpha * (Math.random() < .1 ? .3 : 1);
+		ctx.strokeStyle = color;
+		ctx.lineWidth = 1.5;
+		ctx.shadowBlur = ghost.blur;
+		ctx.shadowColor = color;
+		strokeFull(ctx, horiz, at + ghost.offset, width, height);
+	}
+	if (Math.random() < .5) {
+		ctx.globalAlpha = base * .6;
+		ctx.lineWidth = 2;
+		ctx.shadowBlur = 0;
+		ctx.strokeStyle = colorHi;
+		for (let segment = 0; segment < 3; segment++) {
+			const start = rand(0, span * .85);
+			const end = start + rand(20, 80);
+			const jitter = rand(-4, 4);
+			ctx.beginPath();
+			if (horiz) {
+				ctx.moveTo(start, at + jitter);
+				ctx.lineTo(end, at + jitter);
+			} else {
+				ctx.moveTo(at + jitter, start);
+				ctx.lineTo(at + jitter, end);
+			}
+			ctx.stroke();
+		}
+	}
+}
+function GridFx({ className, cellSize = CELL_SIZE, style, ...props }) {
+	const reduced = useReducedMotion();
+	const canvasRef = React$1.useRef(null);
+	React$1.useEffect(() => {
+		if (reduced) return;
+		const canvas = canvasRef.current;
+		const parent = canvas?.parentElement;
+		const ctx = canvas?.getContext("2d");
+		if (!canvas || !parent || !ctx) return;
+		let width = 0;
+		let height = 0;
+		let dpr = 1;
+		let frame = 0;
+		let nextIn = rand(SPAWN_MIN, SPAWN_MAX);
+		let onScreen = true;
+		const lines = [];
+		const resize = () => {
+			dpr = Math.min(window.devicePixelRatio || 1, 2);
+			width = parent.clientWidth;
+			height = parent.clientHeight;
+			canvas.width = width * dpr;
+			canvas.height = height * dpr;
+			ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+		};
+		const spawn = () => {
+			const horiz = Math.random() < .5;
+			const tracks = Math.ceil((horiz ? height : width) / cellSize);
+			const { color, colorHi } = resolveColors(canvas);
+			lines.push({
+				horiz,
+				at: Math.floor(Math.random() * tracks) * cellSize + .5,
+				life: 0,
+				ttl: rand(TTL_MIN, TTL_MAX),
+				color,
+				colorHi
+			});
+		};
+		const tick = () => {
+			ctx.globalAlpha = 1;
+			ctx.shadowBlur = 0;
+			ctx.clearRect(0, 0, width, height);
+			if (--nextIn <= 0) {
+				spawn();
+				nextIn = rand(SPAWN_MIN, SPAWN_MAX);
+			}
+			for (let index = lines.length - 1; index >= 0; index--) {
+				const line = lines[index];
+				if (!line) continue;
+				line.life++;
+				drawGlitchLine(ctx, line, width, height);
+				if (line.life >= line.ttl) lines.splice(index, 1);
+			}
+			ctx.globalAlpha = 1;
+			ctx.shadowBlur = 0;
+			frame = requestAnimationFrame(tick);
+		};
+		const running = () => onScreen && document.visibilityState === "visible";
+		const start = () => {
+			if (!frame && running()) frame = requestAnimationFrame(tick);
+		};
+		const stop = () => {
+			if (frame) cancelAnimationFrame(frame);
+			frame = 0;
+			ctx.clearRect(0, 0, width, height);
+		};
+		resize();
+		start();
+		const resizeObserver = new ResizeObserver(() => resize());
+		resizeObserver.observe(parent);
+		const intersectionObserver = new IntersectionObserver(([entry]) => {
+			if (!entry) return;
+			onScreen = entry.isIntersecting;
+			if (onScreen) start();
+			else stop();
+		});
+		intersectionObserver.observe(canvas);
+		const onVisibility = () => {
+			if (running()) start();
+			else stop();
+		};
+		document.addEventListener("visibilitychange", onVisibility);
+		return () => {
+			stop();
+			resizeObserver.disconnect();
+			intersectionObserver.disconnect();
+			document.removeEventListener("visibilitychange", onVisibility);
+		};
+	}, [reduced, cellSize]);
+	if (reduced) return null;
+	return /* @__PURE__ */ jsx("canvas", {
+		ref: canvasRef,
+		"aria-hidden": true,
+		"data-slot": "grid-fx",
+		className: cn("pointer-events-none absolute inset-0 h-full w-full", className),
+		style: {
+			zIndex: -1,
+			WebkitMaskImage: "radial-gradient(120% 95% at 50% 0%, #000 30%, transparent 100%)",
+			maskImage: "radial-gradient(120% 95% at 50% 0%, #000 30%, transparent 100%)",
+			...style
+		},
+		...props
+	});
+}
+//#endregion
+export { GridFx };

package/dist/components/heatmap-chart.d.mts

@@ -0,0 +1,40 @@
+import { ChartPaletteName } from "../lib/chart-palette.mjs";
+import * as React$1 from "react";
+
+//#region src/components/heatmap-chart.d.ts
+interface HeatmapChartProps {
+  data: ReadonlyArray<Record<string, string | number | null | undefined>>;
+  xKey: string;
+  yKey: string;
+  dataKey?: string;
+  variant?: "square" | "dot";
+  palette?: ChartPaletteName;
+  xLabels?: readonly string[];
+  yLabels?: readonly string[];
+  highlightPeak?: boolean;
+  loading?: boolean;
+  valueFormatter?: (value: number) => string;
+  xTickFormatter?: (label: string) => string;
+  yTickFormatter?: (label: string) => string;
+  ariaLabel?: string;
+  className?: string;
+}
+declare function HeatmapChart({
+  data,
+  xKey,
+  yKey,
+  dataKey,
+  variant,
+  palette,
+  xLabels,
+  yLabels,
+  highlightPeak,
+  loading,
+  valueFormatter,
+  xTickFormatter,
+  yTickFormatter,
+  ariaLabel,
+  className
+}: HeatmapChartProps): React$1.JSX.Element;
+//#endregion
+export { HeatmapChart, HeatmapChartProps };