@m5kdev/web-ui 0.1.3 → 0.1.4

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

@@ -0,0 +1,27 @@
+import * as React from "react";
+interface MultiSelectOption {
+    label: string;
+    icon?: React.ReactNode;
+    value: string;
+    group?: string;
+}
+interface MultiSelectDropdownProps {
+    options: MultiSelectOption[];
+    selectedValues: string[];
+    onValueChange: (selectedValues: string[]) => void;
+    placeholder?: React.ReactNode;
+    label?: string;
+    className?: string;
+    triggerClassName?: string;
+    disabled?: boolean;
+    maxDisplayCount?: number;
+    multiSelectLabel?: string;
+    trigger?: React.ReactNode;
+    resetButton?: "bottom" | "top";
+    resetLabel?: React.ReactNode;
+    separateGroups?: boolean;
+}
+declare const MultiSelectDropdown: React.ForwardRefExoticComponent<MultiSelectDropdownProps & React.RefAttributes<HTMLButtonElement>>;
+export { MultiSelectDropdown };
+export type { MultiSelectOption, MultiSelectDropdownProps };
+//# sourceMappingURL=MultiSelectDropdown.d.ts.map

package/dist/src/components/MultiSelectDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/MultiSelectDropdown.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,UAAU,iBAAiB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,wBAAwB;IAChC,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,aAAa,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,QAAA,MAAM,mBAAmB,oGA2LxB,CAAC;AAIF,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAC/B,YAAY,EAAE,iBAAiB,EAAE,wBAAwB,EAAE,CAAC"}

package/dist/src/components/MultiSelectDropdown.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, RotateCcw } from "lucide-react";
+import * as React from "react";
+import { Button } from "#components/ui/button";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "#components/ui/dropdown-menu";
+import { cn } from "#utils";
+const MultiSelectDropdown = React.forwardRef(({ options, selectedValues, onValueChange, placeholder = "Select items...", label, className, triggerClassName, trigger, multiSelectLabel, disabled = false, maxDisplayCount = 3, resetButton = "bottom", resetLabel = "Reset", separateGroups = false, ...props }, ref) => {
+    const handleValueChange = (value, checked) => {
+        if (checked) {
+            onValueChange([...selectedValues, value]);
+        }
+        else {
+            onValueChange(selectedValues.filter((v) => v !== value));
+        }
+    };
+    const handleReset = () => {
+        onValueChange([]);
+    };
+    const getDisplayText = () => {
+        if (selectedValues.length === 0) {
+            return placeholder;
+        }
+        const selectedLabels = options
+            .filter((option) => selectedValues.includes(option.value))
+            .map((option) => option.label);
+        if (multiSelectLabel && selectedLabels.length > 1) {
+            return multiSelectLabel;
+        }
+        if (selectedLabels.length <= maxDisplayCount) {
+            return selectedLabels.join(", ");
+        }
+        return `${selectedLabels.slice(0, maxDisplayCount).join(", ")} (+${selectedLabels.length - maxDisplayCount} more)`;
+    };
+    const groupedOptions = React.useMemo(() => {
+        const groups = {};
+        const ungrouped = [];
+        options.forEach((option) => {
+            if (option.group) {
+                if (!groups[option.group]) {
+                    groups[option.group] = [];
+                }
+                groups[option.group].push(option);
+            }
+            else {
+                ungrouped.push(option);
+            }
+        });
+        return { groups, ungrouped };
+    }, [options]);
+    return (_jsx("div", { className: cn("w-full", className), children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { ref: ref, variant: "outline", className: cn("w-full justify-between text-left font-normal", selectedValues.length === 0 && "text-muted-foreground", triggerClassName), disabled: disabled, ...props, children: trigger || (_jsxs(_Fragment, { children: [_jsx("span", { className: "truncate", children: getDisplayText() }), _jsx(ChevronDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })] })) }) }), _jsxs(DropdownMenuContent, { className: "w-full min-w-[var(--radix-dropdown-menu-trigger-width)]", align: "start", children: [resetButton && resetButton === "top" && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuItem, { onClick: handleReset, disabled: selectedValues.length === 0, onSelect: (event) => event.preventDefault(), className: "cursor-pointer text-muted-foreground hover:text-foreground", children: resetLabel || (_jsxs(_Fragment, { children: [_jsx(RotateCcw, { className: "mr-2 h-4 w-4" }), "Reset"] })) }), _jsx(DropdownMenuSeparator, {})] })), label && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuLabel, { children: label }), _jsx(DropdownMenuSeparator, {})] })), Object.entries(groupedOptions.groups).map(([groupName, groupOptions], groupIndex) => (_jsxs(DropdownMenuGroup, { children: [groupIndex > 0 && separateGroups && _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { className: "text-xs font-semibold text-muted-foreground px-2 py-1.5", children: groupName }), groupOptions.map((option) => (_jsxs(DropdownMenuCheckboxItem, { checked: selectedValues.includes(option.value), onCheckedChange: (checked) => handleValueChange(option.value, checked), onSelect: (event) => event.preventDefault(), className: "cursor-pointer", children: [option.icon && _jsx("span", { className: "mr-2", children: option.icon }), option.label] }, option.value)))] }, groupName))), groupedOptions.ungrouped.length > 0 && (_jsxs(DropdownMenuGroup, { children: [Object.keys(groupedOptions.groups).length > 0 && _jsx(DropdownMenuSeparator, {}), groupedOptions.ungrouped.map((option) => (_jsx(DropdownMenuCheckboxItem, { checked: selectedValues.includes(option.value), onCheckedChange: (checked) => handleValueChange(option.value, checked), onSelect: (event) => event.preventDefault(), className: "cursor-pointer", children: option.label }, option.value)))] })), resetButton && resetButton === "bottom" && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { onClick: handleReset, disabled: selectedValues.length === 0, onSelect: (event) => event.preventDefault(), className: "cursor-pointer text-muted-foreground hover:text-foreground", children: resetLabel || (_jsxs(_Fragment, { children: [_jsx(RotateCcw, { className: "mr-2 h-4 w-4" }), "Reset"] })) })] }))] })] }) }));
+});
+MultiSelectDropdown.displayName = "MultiSelectDropdown";
+export { MultiSelectDropdown };

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

@@ -0,0 +1,7 @@
+export default function Orb({ hue, hoverIntensity, rotateOnHover, forceHoverState, }: {
+    hue?: number | undefined;
+    hoverIntensity?: number | undefined;
+    rotateOnHover?: boolean | undefined;
+    forceHoverState?: boolean | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Orb.d.ts.map

package/dist/src/components/Orb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Orb.d.ts","sourceRoot":"","sources":["../../../src/components/Orb.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,UAAU,GAAG,CAAC,EAC1B,GAAO,EACP,cAAoB,EACpB,aAAoB,EACpB,eAAuB,GACxB;;;;;CAAA,2CAuRA"}

package/dist/src/components/Orb.js

@@ -0,0 +1,259 @@
+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;
+    varying vec2 vUv;
+    void main() {
+      vUv = uv;
+      gl_Position = vec4(position, 0.0, 1.0);
+    }
+  `;
+    const frag = /* glsl */ `
+    precision highp float;
+
+    uniform float iTime;
+    uniform vec3 iResolution;
+    uniform float hue;
+    uniform float hover;
+    uniform float rot;
+    uniform float hoverIntensity;
+    varying vec2 vUv;
+
+    vec3 rgb2yiq(vec3 c) {
+      float y = dot(c, vec3(0.299, 0.587, 0.114));
+      float i = dot(c, vec3(0.596, -0.274, -0.322));
+      float q = dot(c, vec3(0.211, -0.523, 0.312));
+      return vec3(y, i, q);
+    }
+    
+    vec3 yiq2rgb(vec3 c) {
+      float r = c.x + 0.956 * c.y + 0.621 * c.z;
+      float g = c.x - 0.272 * c.y - 0.647 * c.z;
+      float b = c.x - 1.106 * c.y + 1.703 * c.z;
+      return vec3(r, g, b);
+    }
+    
+    vec3 adjustHue(vec3 color, float hueDeg) {
+      float hueRad = hueDeg * 3.14159265 / 180.0;
+      vec3 yiq = rgb2yiq(color);
+      float cosA = cos(hueRad);
+      float sinA = sin(hueRad);
+      float i = yiq.y * cosA - yiq.z * sinA;
+      float q = yiq.y * sinA + yiq.z * cosA;
+      yiq.y = i;
+      yiq.z = q;
+      return yiq2rgb(yiq);
+    }
+
+    vec3 hash33(vec3 p3) {
+      p3 = fract(p3 * vec3(0.1031, 0.11369, 0.13787));
+      p3 += dot(p3, p3.yxz + 19.19);
+      return -1.0 + 2.0 * fract(vec3(
+        p3.x + p3.y,
+        p3.x + p3.z,
+        p3.y + p3.z
+      ) * p3.zyx);
+    }
+
+    float snoise3(vec3 p) {
+      const float K1 = 0.333333333;
+      const float K2 = 0.166666667;
+      vec3 i = floor(p + (p.x + p.y + p.z) * K1);
+      vec3 d0 = p - (i - (i.x + i.y + i.z) * K2);
+      vec3 e = step(vec3(0.0), d0 - d0.yzx);
+      vec3 i1 = e * (1.0 - e.zxy);
+      vec3 i2 = 1.0 - e.zxy * (1.0 - e);
+      vec3 d1 = d0 - (i1 - K2);
+      vec3 d2 = d0 - (i2 - K1);
+      vec3 d3 = d0 - 0.5;
+      vec4 h = max(0.6 - vec4(
+        dot(d0, d0),
+        dot(d1, d1),
+        dot(d2, d2),
+        dot(d3, d3)
+      ), 0.0);
+      vec4 n = h * h * h * h * vec4(
+        dot(d0, hash33(i)),
+        dot(d1, hash33(i + i1)),
+        dot(d2, hash33(i + i2)),
+        dot(d3, hash33(i + 1.0))
+      );
+      return dot(vec4(31.316), n);
+    }
+
+    vec4 extractAlpha(vec3 colorIn) {
+      float a = max(max(colorIn.r, colorIn.g), colorIn.b);
+      return vec4(colorIn.rgb / (a + 1e-5), a);
+    }
+
+    const vec3 baseColor1 = vec3(0.611765, 0.262745, 0.996078);
+    const vec3 baseColor2 = vec3(0.298039, 0.760784, 0.913725);
+    const vec3 baseColor3 = vec3(0.062745, 0.078431, 0.600000);
+    const float innerRadius = 0.6;
+    const float noiseScale = 0.65;
+
+    float light1(float intensity, float attenuation, float dist) {
+      return intensity / (1.0 + dist * attenuation);
+    }
+    float light2(float intensity, float attenuation, float dist) {
+      return intensity / (1.0 + dist * dist * attenuation);
+    }
+
+    vec4 draw(vec2 uv) {
+      vec3 color1 = adjustHue(baseColor1, hue);
+      vec3 color2 = adjustHue(baseColor2, hue);
+      vec3 color3 = adjustHue(baseColor3, hue);
+      
+      float ang = atan(uv.y, uv.x);
+      float len = length(uv);
+      float invLen = len > 0.0 ? 1.0 / len : 0.0;
+      
+      float n0 = snoise3(vec3(uv * noiseScale, iTime * 0.5)) * 0.5 + 0.5;
+      float r0 = mix(mix(innerRadius, 1.0, 0.4), mix(innerRadius, 1.0, 0.6), n0);
+      float d0 = distance(uv, (r0 * invLen) * uv);
+      float v0 = light1(1.0, 10.0, d0);
+      v0 *= smoothstep(r0 * 1.05, r0, len);
+      float cl = cos(ang + iTime * 2.0) * 0.5 + 0.5;
+      
+      float a = iTime * -1.0;
+      vec2 pos = vec2(cos(a), sin(a)) * r0;
+      float d = distance(uv, pos);
+      float v1 = light2(1.5, 5.0, d);
+      v1 *= light1(1.0, 50.0, d0);
+      
+      float v2 = smoothstep(1.0, mix(innerRadius, 1.0, n0 * 0.5), len);
+      float v3 = smoothstep(innerRadius, mix(innerRadius, 1.0, 0.5), len);
+      
+      vec3 col = mix(color1, color2, cl);
+      col = mix(color3, col, v0);
+      col = (col + v1) * v2 * v3;
+      col = clamp(col, 0.0, 1.0);
+      
+      return extractAlpha(col);
+    }
+
+    vec4 mainImage(vec2 fragCoord) {
+      vec2 center = iResolution.xy * 0.5;
+      float size = min(iResolution.x, iResolution.y);
+      vec2 uv = (fragCoord - center) / size * 2.0;
+      
+      float angle = rot;
+      float s = sin(angle);
+      float c = cos(angle);
+      uv = vec2(c * uv.x - s * uv.y, s * uv.x + c * uv.y);
+      
+      uv.x += hover * hoverIntensity * 0.1 * sin(uv.y * 10.0 + iTime);
+      uv.y += hover * hoverIntensity * 0.1 * sin(uv.x * 10.0 + iTime);
+      
+      return draw(uv);
+    }
+
+    void main() {
+      vec2 fragCoord = vUv * iResolution.xy;
+      vec4 col = mainImage(fragCoord);
+      gl_FragColor = vec4(col.rgb * col.a, col.a);
+    }
+  `;
+    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,19 @@
+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 };
+//# sourceMappingURL=PageAlert.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageAlert.d.ts","sourceRoot":"","sources":["../../../src/components/PageAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,QAAA,MAAM,iBAAiB;;8EAmBtB,CAAC;AAUF,UAAU,cACR,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EACjC,YAAY,CAAC,OAAO,iBAAiB,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACnD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,SAAS,oGAoEd,CAAC;AAIF,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,CAAC"}

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,11 @@
+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[];
+//# sourceMappingURL=SelectChips.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectChips.d.ts","sourceRoot":"","sources":["../../../src/components/SelectChips.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,WAAW,EAAY,MAAM,eAAe,CAAC;AAEnE,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,aAAa,EACb,iBAAiB,EACjB,WAAW,GACZ,EAAE;IACD,KAAK,EAAE,MAAM,EAAE,GAAG;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACrD,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,6CA2BA"}

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,8 @@
+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;
+//# sourceMappingURL=SidebarItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarItem.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,KAAK,GACN,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,2CAWA"}

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,20 @@
+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>;
+//# sourceMappingURL=Steps.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Steps.d.ts","sourceRoot":"","sources":["../../../src/components/Steps.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,IAAI;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,WAAW,GAAG,SAAS,GAAG,UAAU,CAAC;CAC9C;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA0JtC,CAAC;AAGF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA6E9C,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA2E1D,CAAC"}

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,3 @@
+import { type SelectProps } from "@heroui/react";
+export declare function TablerIconPicker({ value, onSelectionChange, isVirtualized, ...props }: Omit<SelectProps, "children">): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TablerIconPicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TablerIconPicker.d.ts","sourceRoot":"","sources":["../../../src/components/TablerIconPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAErE,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,iBAAiB,EACjB,aAAoB,EACpB,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,2CAkB/B"}