@m5kdev/web-ui 0.1.3 → 0.1.5

package/{src/components/Orb.tsx → dist/src/components/Orb.js}

@@ -1,15 +1,9 @@
-import { Mesh, Program, Renderer, Triangle, Vec3 } from "ogl";
-import { useEffect, useRef } from "react";
-
-export default function Orb({
-  hue = 0,
-  hoverIntensity = 0.2,
-  rotateOnHover = true,
-  forceHoverState = false,
-}) {
-  const ctnDom = useRef(null);
-
-  const vert = /* glsl */ `
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Mesh, Program, Renderer, Triangle, Vec3 } from "ogl";
+import { useEffect, useRef } from "react";
+export default function Orb({ hue = 0, hoverIntensity = 0.2, rotateOnHover = true, forceHoverState = false, }) {
+    const ctnDom = useRef(null);
+    const vert = /* glsl */ `
     precision highp float;
     attribute vec2 position;
     attribute vec2 uv;
@@ -18,9 +12,8 @@ export default function Orb({
       vUv = uv;
       gl_Position = vec4(position, 0.0, 1.0);
     }
-  `;
-
-  const frag = /* glsl */ `
+  `;
+    const frag = /* glsl */ `
     precision highp float;
 
     uniform float iTime;
@@ -165,124 +158,102 @@ export default function Orb({
       vec4 col = mainImage(fragCoord);
       gl_FragColor = vec4(col.rgb * col.a, col.a);
     }
-  `;
-
-  useEffect(() => {
-    const container = ctnDom.current as HTMLElement | null;
-    if (!container) return;
-
-    const renderer = new Renderer({ alpha: true, premultipliedAlpha: false });
-    const gl = renderer.gl;
-    gl.clearColor(0, 0, 0, 0);
-    container.appendChild(gl.canvas);
-
-    const geometry = new Triangle(gl);
-    const program = new Program(gl, {
-      vertex: vert,
-      fragment: frag,
-      uniforms: {
-        iTime: { value: 0 },
-        iResolution: {
-          value: new Vec3(gl.canvas.width, gl.canvas.height, gl.canvas.width / gl.canvas.height),
-        },
-        hue: { value: hue },
-        hover: { value: 0 },
-        rot: { value: 0 },
-        hoverIntensity: { value: hoverIntensity },
-      },
-    });
-
-    const mesh = new Mesh(gl, { geometry, program });
-
-    function resize() {
-      if (!container) return;
-      const dpr = window.devicePixelRatio || 1;
-      const width = container.clientWidth;
-      const height = container.clientHeight;
-      renderer.setSize(width * dpr, height * dpr);
-      gl.canvas.style.width = width + "px";
-      gl.canvas.style.height = height + "px";
-      program.uniforms.iResolution.value.set(
-        gl.canvas.width,
-        gl.canvas.height,
-        gl.canvas.width / gl.canvas.height
-      );
-    }
-    window.addEventListener("resize", resize);
-    resize();
-
-    let targetHover = 0;
-    let lastTime = 0;
-    let currentRot = 0;
-    const rotationSpeed = 0.3;
-
-    const handleMouseMove = (e: MouseEvent) => {
-      const rect = container.getBoundingClientRect();
-      const x = e.clientX - rect.left;
-      const y = e.clientY - rect.top;
-      const width = rect.width;
-      const height = rect.height;
-      const size = Math.min(width, height);
-      const centerX = width / 2;
-      const centerY = height / 2;
-      const uvX = ((x - centerX) / size) * 2.0;
-      const uvY = ((y - centerY) / size) * 2.0;
-
-      if (Math.sqrt(uvX * uvX + uvY * uvY) < 0.8) {
-        targetHover = 1;
-      } else {
-        targetHover = 0;
-      }
-    };
-
-    const handleMouseLeave = () => {
-      targetHover = 0;
-    };
-
-    container.addEventListener("mousemove", handleMouseMove);
-    container.addEventListener("mouseleave", handleMouseLeave);
-
-    let rafId: number;
-    const update = (t: number) => {
-      rafId = requestAnimationFrame(update);
-      const dt = (t - lastTime) * 0.001;
-      lastTime = t;
-      program.uniforms.iTime.value = t * 0.001;
-      program.uniforms.hue.value = hue;
-      program.uniforms.hoverIntensity.value = hoverIntensity;
-
-      const effectiveHover = forceHoverState ? 1 : targetHover;
-      program.uniforms.hover.value += (effectiveHover - program.uniforms.hover.value) * 0.1;
-
-      if (rotateOnHover && effectiveHover > 0.5) {
-        currentRot += dt * rotationSpeed;
-      }
-      program.uniforms.rot.value = currentRot;
-
-      renderer.render({ scene: mesh });
-    };
-    rafId = requestAnimationFrame(update);
-
-    return () => {
-      cancelAnimationFrame(rafId);
-      window.removeEventListener("resize", resize);
-      container.removeEventListener("mousemove", handleMouseMove);
-      container.removeEventListener("mouseleave", handleMouseLeave);
-      container.removeChild(gl.canvas);
-      gl.getExtension("WEBGL_lose_context")?.loseContext();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [hue, hoverIntensity, rotateOnHover, forceHoverState]);
-
-  return (
-    <div
-      ref={ctnDom}
-      style={{
-        position: "relative",
-        zIndex: 0,
-        width: "100%",
-        height: "100%",
-      }}
-    />
-  );
-}
+  `;
+    useEffect(() => {
+        const container = ctnDom.current;
+        if (!container)
+            return;
+        const renderer = new Renderer({ alpha: true, premultipliedAlpha: false });
+        const gl = renderer.gl;
+        gl.clearColor(0, 0, 0, 0);
+        container.appendChild(gl.canvas);
+        const geometry = new Triangle(gl);
+        const program = new Program(gl, {
+            vertex: vert,
+            fragment: frag,
+            uniforms: {
+                iTime: { value: 0 },
+                iResolution: {
+                    value: new Vec3(gl.canvas.width, gl.canvas.height, gl.canvas.width / gl.canvas.height),
+                },
+                hue: { value: hue },
+                hover: { value: 0 },
+                rot: { value: 0 },
+                hoverIntensity: { value: hoverIntensity },
+            },
+        });
+        const mesh = new Mesh(gl, { geometry, program });
+        function resize() {
+            if (!container)
+                return;
+            const dpr = window.devicePixelRatio || 1;
+            const width = container.clientWidth;
+            const height = container.clientHeight;
+            renderer.setSize(width * dpr, height * dpr);
+            gl.canvas.style.width = width + "px";
+            gl.canvas.style.height = height + "px";
+            program.uniforms.iResolution.value.set(gl.canvas.width, gl.canvas.height, gl.canvas.width / gl.canvas.height);
+        }
+        window.addEventListener("resize", resize);
+        resize();
+        let targetHover = 0;
+        let lastTime = 0;
+        let currentRot = 0;
+        const rotationSpeed = 0.3;
+        const handleMouseMove = (e) => {
+            const rect = container.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+            const width = rect.width;
+            const height = rect.height;
+            const size = Math.min(width, height);
+            const centerX = width / 2;
+            const centerY = height / 2;
+            const uvX = ((x - centerX) / size) * 2.0;
+            const uvY = ((y - centerY) / size) * 2.0;
+            if (Math.sqrt(uvX * uvX + uvY * uvY) < 0.8) {
+                targetHover = 1;
+            }
+            else {
+                targetHover = 0;
+            }
+        };
+        const handleMouseLeave = () => {
+            targetHover = 0;
+        };
+        container.addEventListener("mousemove", handleMouseMove);
+        container.addEventListener("mouseleave", handleMouseLeave);
+        let rafId;
+        const update = (t) => {
+            rafId = requestAnimationFrame(update);
+            const dt = (t - lastTime) * 0.001;
+            lastTime = t;
+            program.uniforms.iTime.value = t * 0.001;
+            program.uniforms.hue.value = hue;
+            program.uniforms.hoverIntensity.value = hoverIntensity;
+            const effectiveHover = forceHoverState ? 1 : targetHover;
+            program.uniforms.hover.value += (effectiveHover - program.uniforms.hover.value) * 0.1;
+            if (rotateOnHover && effectiveHover > 0.5) {
+                currentRot += dt * rotationSpeed;
+            }
+            program.uniforms.rot.value = currentRot;
+            renderer.render({ scene: mesh });
+        };
+        rafId = requestAnimationFrame(update);
+        return () => {
+            cancelAnimationFrame(rafId);
+            window.removeEventListener("resize", resize);
+            container.removeEventListener("mousemove", handleMouseMove);
+            container.removeEventListener("mouseleave", handleMouseLeave);
+            container.removeChild(gl.canvas);
+            gl.getExtension("WEBGL_lose_context")?.loseContext();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [hue, hoverIntensity, rotateOnHover, forceHoverState]);
+    return (_jsx("div", { ref: ctnDom, style: {
+            position: "relative",
+            zIndex: 0,
+            width: "100%",
+            height: "100%",
+        } }));
+}

package/dist/src/components/PageAlert.d.ts

@@ -0,0 +1,18 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+declare const pageAlertVariants: (props?: ({
+    variant?: "info" | "warning" | "success" | "default" | "destructive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface PageAlertProps extends React.ComponentProps<"div">, VariantProps<typeof pageAlertVariants> {
+    title?: string;
+    description?: React.ReactNode;
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    dismissible?: boolean;
+    defaultOpen?: boolean;
+    onDismiss?: () => void;
+    children?: React.ReactNode;
+}
+declare const PageAlert: React.ForwardRefExoticComponent<Omit<PageAlertProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { PageAlert, type PageAlertProps };

package/dist/src/components/PageAlert.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { AlertCircle, AlertTriangle, CheckCircle, Info, X } from "lucide-react";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { cn } from "#utils";
+const pageAlertVariants = cva("relative w-full border-b px-4 py-3 text-sm transition-all duration-300 ease-in-out", {
+    variants: {
+        variant: {
+            default: "bg-background border-border text-foreground",
+            info: "bg-blue-50 border-blue-200 text-blue-900 dark:bg-blue-950/50 dark:border-blue-800 dark:text-blue-100",
+            success: "bg-green-50 border-green-200 text-green-900 dark:bg-green-950/50 dark:border-green-800 dark:text-green-100",
+            warning: "bg-yellow-50 border-yellow-200 text-yellow-900 dark:bg-yellow-950/50 dark:border-yellow-800 dark:text-yellow-100",
+            destructive: "bg-red-50 border-red-200 text-red-900 dark:bg-red-950/50 dark:border-red-800 dark:text-red-100",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+const iconMap = {
+    default: Info,
+    info: Info,
+    success: CheckCircle,
+    warning: AlertTriangle,
+    destructive: AlertCircle,
+};
+const PageAlert = React.forwardRef(({ className, variant = "default", title, description, icon, dismissible = true, defaultOpen = true, onDismiss, children, ...props }, ref) => {
+    const { t } = useTranslation();
+    const [isOpen, setIsOpen] = React.useState(defaultOpen);
+    const [isAnimatingOut, setIsAnimatingOut] = React.useState(false);
+    const IconComponent = icon || iconMap[variant || "default"];
+    const handleDismiss = React.useCallback(() => {
+        setIsAnimatingOut(true);
+        // Wait for animation to complete before removing from DOM
+        setTimeout(() => {
+            setIsOpen(false);
+            onDismiss?.();
+        }, 300); // Match the animation duration
+    }, [onDismiss]);
+    if (!isOpen) {
+        return null;
+    }
+    const content = (_jsx("div", { ref: ref, role: "alert", className: cn(pageAlertVariants({ variant }), isAnimatingOut && "transform -translate-y-full opacity-0", className), ...props, children: _jsxs("div", { className: "flex items-start gap-3", children: [IconComponent && _jsx(IconComponent, { className: "h-4 w-4 mt-0.5 flex-shrink-0" }), _jsxs("div", { className: "flex-1 min-w-0", children: [title && _jsx("div", { className: "font-medium leading-none tracking-tight mb-1", children: title }), description && _jsx("div", { className: "text-sm opacity-90 leading-relaxed", children: description }), children] }), dismissible && (_jsx("button", { type: "button", onClick: handleDismiss, className: "flex-shrink-0 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none", "aria-label": t("web-ui:alert.dismissLabel"), children: _jsx(X, { className: "h-4 w-4" }) }))] }) }));
+    return content;
+});
+PageAlert.displayName = "PageAlert";
+export { PageAlert };

package/dist/src/components/SelectChips.d.ts

@@ -0,0 +1,10 @@
+import { type ButtonProps } from "@heroui/react";
+export declare function SelectChips({ items, selectedItems, onSelectionChange, buttonProps, }: {
+    items: string[] | {
+        label: string;
+        value: string;
+    }[];
+    selectedItems: string[];
+    onSelectionChange: (items: string[]) => void;
+    buttonProps?: ButtonProps;
+}): import("react/jsx-runtime").JSX.Element[];

package/dist/src/components/SelectChips.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button, Checkbox } from "@heroui/react";
+export function SelectChips({ items, selectedItems, onSelectionChange, buttonProps, }) {
+    return items.map((item) => {
+        const value = typeof item === "string" ? item : item.value;
+        const label = typeof item === "string" ? item : item.label;
+        return (_jsx(Button, { startContent: _jsx(Checkbox, { isSelected: selectedItems.includes(value), isReadOnly: true, style: { pointerEvents: "none" } }), onPress: () => onSelectionChange(selectedItems.includes(value)
+                ? selectedItems.filter((i) => i !== value)
+                : [...selectedItems, value]), ...buttonProps, children: label }, value));
+    });
+}

package/dist/src/components/SidebarItem.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+export declare function SidebarItem({ label, icon, link, badge, }: {
+    label: string;
+    icon: ReactNode;
+    link: string;
+    badge?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/SidebarItem.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link } from "react-router";
+import { SidebarMenuButton, SidebarMenuItem } from "#components/ui/sidebar";
+export function SidebarItem({ label, icon, link, badge, }) {
+    return (_jsx(SidebarMenuItem, { children: _jsx(SidebarMenuButton, { asChild: true, tooltip: label, children: _jsxs(Link, { to: link, children: [icon, badge ? badge : _jsx("span", { children: label })] }) }) }));
+}

package/dist/src/components/Steps.d.ts

@@ -0,0 +1,19 @@
+import type React from "react";
+export interface Step {
+    id: string;
+    title: string;
+    description?: string;
+    status: "completed" | "current" | "upcoming";
+}
+export interface StepsProps {
+    steps: Step[];
+    className?: string;
+    onStepClick?: (step: number) => void;
+}
+export declare const Steps: React.FC<StepsProps>;
+export declare const VerticalSteps: React.FC<StepsProps>;
+export interface HorizontalStepsProps {
+    steps: Step[];
+    className?: string;
+}
+export declare const HorizontalSteps: React.FC<HorizontalStepsProps>;

package/dist/src/components/Steps.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check } from "lucide-react";
+import { Badge } from "#components/ui/badge";
+import { Separator } from "#components/ui/separator";
+import { cn } from "#utils";
+export const Steps = ({ steps, className, onStepClick }) => {
+    return (_jsxs("nav", { "aria-label": "Progress", className: cn("w-full", className), children: [_jsx("ol", { className: "lg:hidden space-y-6", children: steps.map((step, stepIdx) => (_jsxs("li", { className: "relative", children: [_jsxs("div", { className: "flex items-start", children: [_jsx("div", { className: "flex-shrink-0", children: step.status === "completed" ? (_jsx("button", { type: "button", onClick: () => onStepClick?.(stepIdx), children: _jsx(Badge, { variant: "default", className: "h-10 w-10 rounded-full p-0 flex items-center justify-center", children: _jsx(Check, { className: "h-5 w-5" }) }) })) : step.status === "current" ? (_jsx(Badge, { variant: "default", className: "h-10 w-10 rounded-full p-0 flex items-center justify-center text-sm font-medium", children: stepIdx + 1 })) : (_jsx(Badge, { variant: "outline", className: "h-10 w-10 rounded-full p-0 flex items-center justify-center text-sm font-medium bg-background", children: stepIdx + 1 })) }), _jsxs("div", { className: "ml-4 min-w-0 flex-1", children: [_jsx("p", { className: cn("text-sm font-medium", step.status === "completed" || step.status === "current"
+                                                ? "text-foreground"
+                                                : "text-muted-foreground"), children: step.title }), step.description && (_jsx("p", { className: cn("text-sm mt-1", step.status === "completed" || step.status === "current"
+                                                ? "text-muted-foreground"
+                                                : "text-muted-foreground/60"), children: step.description }))] })] }), stepIdx !== steps.length - 1 && (_jsx("div", { className: "absolute left-5 top-10 -ml-px mt-2 h-6", children: _jsx(Separator, { orientation: "vertical", className: cn("h-full", step.status === "completed" ? "bg-primary" : "bg-muted-foreground/20") }) }))] }, step.id))) }), _jsx("ol", { className: "hidden lg:flex items-center justify-between", children: steps.map((step, stepIdx) => (_jsxs("li", { className: "relative flex flex-col items-center flex-1", children: [_jsx("div", { className: "relative z-10 flex-shrink-0", children: step.status === "completed" ? (_jsx("button", { type: "button", onClick: () => onStepClick?.(stepIdx), children: _jsx(Badge, { variant: "default", className: "h-10 w-10 rounded-full p-0 flex items-center justify-center", children: _jsx(Check, { className: "h-5 w-5" }) }) })) : step.status === "current" ? (_jsx(Badge, { variant: "default", className: "h-10 w-10 rounded-full p-0 flex items-center justify-center text-sm font-medium", children: stepIdx + 1 })) : (_jsx(Badge, { variant: "outline", className: "h-10 w-10 rounded-full p-0 flex items-center justify-center text-sm font-medium bg-background", children: stepIdx + 1 })) }), _jsxs("div", { className: "mt-3 text-center max-w-32", children: [_jsx("p", { className: cn("text-sm font-medium", step.status === "completed" || step.status === "current"
+                                        ? "text-foreground"
+                                        : "text-muted-foreground"), children: step.title }), step.description && (_jsx("p", { className: cn("text-xs mt-1", step.status === "completed" || step.status === "current"
+                                        ? "text-muted-foreground"
+                                        : "text-muted-foreground/60"), children: step.description }))] }), stepIdx !== steps.length - 1 && (_jsx("div", { className: "absolute left-1/2 top-5 w-full h-0.5 -z-10", children: _jsx(Separator, { orientation: "horizontal", className: cn("w-full", step.status === "completed" ? "bg-primary" : "bg-muted-foreground/20") }) }))] }, step.id))) })] }));
+};
+// Keep the individual components for specific use cases
+export const VerticalSteps = ({ steps, className }) => {
+    return (_jsx("nav", { "aria-label": "Progress", className: cn("", className), children: _jsx("ol", { className: "space-y-6", children: steps.map((step, stepIdx) => (_jsxs("li", { className: "relative", children: [_jsxs("div", { className: "flex items-start", children: [_jsx("div", { className: "flex-shrink-0", children: step.status === "completed" ? (_jsx(Badge, { variant: "default", className: "h-10 w-10 rounded-full p-0 flex items-center justify-center", children: _jsx(Check, { className: "h-5 w-5" }) })) : step.status === "current" ? (_jsx(Badge, { variant: "default", className: "h-10 w-10 rounded-full p-0 flex items-center justify-center text-sm font-medium", children: stepIdx + 1 })) : (_jsx(Badge, { variant: "outline", className: "h-10 w-10 rounded-full p-0 flex items-center justify-center text-sm font-medium bg-background", children: stepIdx + 1 })) }), _jsxs("div", { className: "ml-4 min-w-0 flex-1", children: [_jsx("p", { className: cn("text-sm font-medium", step.status === "completed" || step.status === "current"
+                                            ? "text-foreground"
+                                            : "text-muted-foreground"), children: step.title }), step.description && (_jsx("p", { className: cn("text-sm mt-1", step.status === "completed" || step.status === "current"
+                                            ? "text-muted-foreground"
+                                            : "text-muted-foreground/60"), children: step.description }))] })] }), stepIdx !== steps.length - 1 && (_jsx("div", { className: "absolute left-5 top-10 -ml-px mt-2 h-6", children: _jsx(Separator, { orientation: "vertical", className: cn("h-full", step.status === "completed" ? "bg-primary" : "bg-muted-foreground/20") }) }))] }, step.id))) }) }));
+};
+export const HorizontalSteps = ({ steps, className }) => {
+    return (_jsx("nav", { "aria-label": "Progress", className: cn("w-full", className), children: _jsx("ol", { className: "flex items-center justify-between", children: steps.map((step, stepIdx) => (_jsxs("li", { className: "relative flex flex-col items-center flex-1", children: [_jsx("div", { className: "relative z-10 flex-shrink-0", children: step.status === "completed" ? (_jsx(Badge, { variant: "default", className: "h-10 w-10 rounded-full p-0 flex items-center justify-center", children: _jsx(Check, { className: "h-5 w-5" }) })) : step.status === "current" ? (_jsx(Badge, { variant: "default", className: "h-10 w-10 rounded-full p-0 flex items-center justify-center text-sm font-medium", children: stepIdx + 1 })) : (_jsx(Badge, { variant: "outline", className: "h-10 w-10 rounded-full p-0 flex items-center justify-center text-sm font-medium bg-background", children: stepIdx + 1 })) }), _jsxs("div", { className: "mt-3 text-center max-w-32", children: [_jsx("p", { className: cn("text-sm font-medium", step.status === "completed" || step.status === "current"
+                                    ? "text-foreground"
+                                    : "text-muted-foreground"), children: step.title }), step.description && (_jsx("p", { className: cn("text-xs mt-1", step.status === "completed" || step.status === "current"
+                                    ? "text-muted-foreground"
+                                    : "text-muted-foreground/60"), children: step.description }))] }), stepIdx !== steps.length - 1 && (_jsx("div", { className: "absolute left-1/2 top-5 w-full h-0.5 -z-10", children: _jsx(Separator, { orientation: "horizontal", className: cn("w-full", step.status === "completed" ? "bg-primary" : "bg-muted-foreground/20") }) }))] }, step.id))) }) }));
+};
+Steps.displayName = "Steps";
+VerticalSteps.displayName = "VerticalSteps";
+HorizontalSteps.displayName = "HorizontalSteps";

package/dist/src/components/TablerIconPicker.d.ts

@@ -0,0 +1,2 @@
+import { type SelectProps } from "@heroui/react";
+export declare function TablerIconPicker({ value, onSelectionChange, isVirtualized, ...props }: Omit<SelectProps, "children">): import("react/jsx-runtime").JSX.Element;