@hanzo/ui 5.3.28 → 5.3.30

package/dist/dock/limelight-nav.js

@@ -0,0 +1,295 @@
+"use client";
+'use strict';
+
+var React4 = require('react');
+var lucideReact = require('lucide-react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var reactSlot = require('@radix-ui/react-slot');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+__name(cn, "cn");
+var buttonVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+        // Keep the additional Hanzo variants for backward compatibility
+        primary: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        linkFG: "text-primary underline-offset-4 hover:underline",
+        linkMuted: "text-muted-foreground underline-offset-4 hover:underline hover:text-foreground"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React4__namespace.forwardRef(
+  ({ className, variant, size, asChild = false, isLoading = false, children, ...props }, ref) => {
+    const Comp = asChild ? reactSlot.Slot : "button";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props,
+        children: [
+          isLoading ? /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.Loader2,
+            {
+              className: cn("h-4 w-4 animate-spin", size !== "icon" && "mr-2")
+            }
+          ) : null,
+          isLoading && size === "icon" ? null : children
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var badgeVariants = classVarianceAuthority.cva(
+  "focus:ring-ring border-divider inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-hidden",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80 border-transparent shadow",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent shadow",
+        outline: "hover:bg-bg-secondary text-text-secondary hover:text-text-default border border-gray-500 bg-transparent shadow-xs",
+        inputAdornment: "bg-gray-600 px-2 font-medium text-white",
+        tags: "text-text-secondary border-divider bg-bg-quaternary rounded-lg px-2 py-1 font-normal capitalize"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var Badge = React4__namespace.forwardRef(
+  ({ className, variant, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn(badgeVariants({ variant }), className), ...props });
+  }
+);
+Badge.displayName = "Badge";
+var Input = /* @__PURE__ */ __name(({
+  className,
+  type,
+  startAdornment,
+  endAdornment,
+  hidePasswordToggle,
+  ref,
+  ...props
+}) => {
+  const inputRef = React4.useRef(null);
+  const startAdornmentRef = React4.useRef(null);
+  const endAdornmentRef = React4.useRef(null);
+  const [showPassword, setShowPassword] = React4__namespace.useState(false);
+  const togglePasswordVisibility = /* @__PURE__ */ __name(() => {
+    setShowPassword(!showPassword);
+  }, "togglePasswordVisibility");
+  const style = {};
+  if (startAdornment) {
+    style.paddingLeft = `${(startAdornmentRef?.current?.offsetWidth ?? 0) + 20}px`;
+  }
+  if (endAdornment) {
+    style.paddingRight = `${(endAdornmentRef?.current?.offsetWidth ?? 0) + 20}px`;
+  }
+  React4.useImperativeHandle(ref, () => inputRef.current, []);
+  React4.useEffect(() => {
+    if (props.autoFocus) {
+      setTimeout(() => {
+        inputRef?.current?.focus();
+      }, 0);
+    }
+  }, [props.autoFocus]);
+  const inputType = type === "password" && showPassword ? "text" : type;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        className: cn(
+          "h-input border-border-input bg-bg-secondary focus:border-border-input-focus disabled:bg-bg-input-disabled peer placeholder-shown:border-border-input text-text-default w-full rounded-lg border px-4 py-3 pt-8 text-sm font-medium placeholder-transparent outline outline-0 transition-all placeholder-shown:border focus:border focus:outline-0 disabled:border-0 disabled:text-gray-400",
+          startAdornment && "pl-[var(--custom-padding-left-input)]",
+          endAdornment && "pr-[var(--custom-padding-right-input)]",
+          type === "password" && "pr-[60px]",
+          className
+        ),
+        placeholder: " ",
+        ref: inputRef,
+        spellCheck: false,
+        style,
+        type: inputType,
+        ...props
+      }
+    ),
+    startAdornment ? /* @__PURE__ */ jsxRuntime.jsx(
+      Badge,
+      {
+        className: "peer/adornment adornment absolute top-[30px] left-4",
+        ref: startAdornmentRef,
+        variant: "inputAdornment",
+        children: startAdornment
+      }
+    ) : null,
+    endAdornment && typeof endAdornment === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+      Badge,
+      {
+        className: "peer/adornment adornment absolute top-[30px] right-4",
+        ref: endAdornmentRef,
+        variant: "inputAdornment",
+        children: endAdornment
+      }
+    ) : null,
+    endAdornment && typeof endAdornment !== "string" && React4__namespace.isValidElement(endAdornment) ? React4__namespace.cloneElement(endAdornment, {
+      ref: endAdornmentRef
+    }) : null,
+    type === "password" && !hidePasswordToggle && /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        "aria-label": showPassword ? "Hide password" : "Show password",
+        className: "absolute top-3 right-3",
+        onClick: togglePasswordVisibility,
+        size: "icon",
+        type: "button",
+        variant: "ghost",
+        children: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOffIcon, { "aria-hidden": "true", className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeIcon, { "aria-hidden": "true", className: "h-4 w-4" })
+      }
+    )
+  ] });
+}, "Input");
+Input.displayName = "Input";
+var LimelightNav = React4__namespace.forwardRef(
+  ({ className, items = [], ...props }, ref) => {
+    const [isOpen, setIsOpen] = React4__namespace.useState(false);
+    const [search, setSearch] = React4__namespace.useState("");
+    React4__namespace.useEffect(() => {
+      const down = /* @__PURE__ */ __name((e) => {
+        if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+          e.preventDefault();
+          setIsOpen((open) => !open);
+        }
+      }, "down");
+      document.addEventListener("keydown", down);
+      return () => document.removeEventListener("keydown", down);
+    }, []);
+    const filteredItems = items.filter(
+      (item) => item.label.toLowerCase().includes(search.toLowerCase())
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "nav",
+        {
+          ref,
+          className: cn("flex items-center gap-4", className),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              Button,
+              {
+                variant: "outline",
+                onClick: () => setIsOpen(true),
+                className: "relative w-64 justify-start",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "mr-2 h-4 w-4" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Search..." }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("kbd", { className: "pointer-events-none absolute right-2 hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Command, { className: "h-3 w-3" }),
+                    "K"
+                  ] })
+                ]
+              }
+            ),
+            items.slice(0, 4).map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+              "a",
+              {
+                href: item.href,
+                className: "text-sm font-medium transition-colors hover:text-primary",
+                children: item.label
+              },
+              item.href
+            ))
+          ]
+        }
+      ),
+      isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm",
+          onClick: () => setIsOpen(false),
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-lg border bg-card p-6 shadow-lg",
+              onClick: (e) => e.stopPropagation(),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Input,
+                  {
+                    placeholder: "Search navigation...",
+                    value: search,
+                    onChange: (e) => setSearch(e.target.value),
+                    autoFocus: true,
+                    className: "mb-4"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-96 space-y-1 overflow-auto", children: filteredItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "a",
+                  {
+                    href: item.href,
+                    className: "block rounded-md px-4 py-2 hover:bg-accent",
+                    onClick: () => setIsOpen(false),
+                    children: item.label
+                  },
+                  item.href
+                )) })
+              ]
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+LimelightNav.displayName = "LimelightNav";
+
+exports.LimelightNav = LimelightNav;

package/dist/dock/limelight-nav.mjs

@@ -0,0 +1,274 @@
+"use client";
+import * as React4 from 'react';
+import { useRef, useImperativeHandle, useEffect } from 'react';
+import { Loader2, Search, Command, EyeOffIcon, EyeIcon } from 'lucide-react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+__name(cn, "cn");
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+        // Keep the additional Hanzo variants for backward compatibility
+        primary: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        linkFG: "text-primary underline-offset-4 hover:underline",
+        linkMuted: "text-muted-foreground underline-offset-4 hover:underline hover:text-foreground"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React4.forwardRef(
+  ({ className, variant, size, asChild = false, isLoading = false, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsxs(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props,
+        children: [
+          isLoading ? /* @__PURE__ */ jsx(
+            Loader2,
+            {
+              className: cn("h-4 w-4 animate-spin", size !== "icon" && "mr-2")
+            }
+          ) : null,
+          isLoading && size === "icon" ? null : children
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var badgeVariants = cva(
+  "focus:ring-ring border-divider inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-hidden",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80 border-transparent shadow",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent shadow",
+        outline: "hover:bg-bg-secondary text-text-secondary hover:text-text-default border border-gray-500 bg-transparent shadow-xs",
+        inputAdornment: "bg-gray-600 px-2 font-medium text-white",
+        tags: "text-text-secondary border-divider bg-bg-quaternary rounded-lg px-2 py-1 font-normal capitalize"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var Badge = React4.forwardRef(
+  ({ className, variant, ...props }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(badgeVariants({ variant }), className), ...props });
+  }
+);
+Badge.displayName = "Badge";
+var Input = /* @__PURE__ */ __name(({
+  className,
+  type,
+  startAdornment,
+  endAdornment,
+  hidePasswordToggle,
+  ref,
+  ...props
+}) => {
+  const inputRef = useRef(null);
+  const startAdornmentRef = useRef(null);
+  const endAdornmentRef = useRef(null);
+  const [showPassword, setShowPassword] = React4.useState(false);
+  const togglePasswordVisibility = /* @__PURE__ */ __name(() => {
+    setShowPassword(!showPassword);
+  }, "togglePasswordVisibility");
+  const style = {};
+  if (startAdornment) {
+    style.paddingLeft = `${(startAdornmentRef?.current?.offsetWidth ?? 0) + 20}px`;
+  }
+  if (endAdornment) {
+    style.paddingRight = `${(endAdornmentRef?.current?.offsetWidth ?? 0) + 20}px`;
+  }
+  useImperativeHandle(ref, () => inputRef.current, []);
+  useEffect(() => {
+    if (props.autoFocus) {
+      setTimeout(() => {
+        inputRef?.current?.focus();
+      }, 0);
+    }
+  }, [props.autoFocus]);
+  const inputType = type === "password" && showPassword ? "text" : type;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        className: cn(
+          "h-input border-border-input bg-bg-secondary focus:border-border-input-focus disabled:bg-bg-input-disabled peer placeholder-shown:border-border-input text-text-default w-full rounded-lg border px-4 py-3 pt-8 text-sm font-medium placeholder-transparent outline outline-0 transition-all placeholder-shown:border focus:border focus:outline-0 disabled:border-0 disabled:text-gray-400",
+          startAdornment && "pl-[var(--custom-padding-left-input)]",
+          endAdornment && "pr-[var(--custom-padding-right-input)]",
+          type === "password" && "pr-[60px]",
+          className
+        ),
+        placeholder: " ",
+        ref: inputRef,
+        spellCheck: false,
+        style,
+        type: inputType,
+        ...props
+      }
+    ),
+    startAdornment ? /* @__PURE__ */ jsx(
+      Badge,
+      {
+        className: "peer/adornment adornment absolute top-[30px] left-4",
+        ref: startAdornmentRef,
+        variant: "inputAdornment",
+        children: startAdornment
+      }
+    ) : null,
+    endAdornment && typeof endAdornment === "string" ? /* @__PURE__ */ jsx(
+      Badge,
+      {
+        className: "peer/adornment adornment absolute top-[30px] right-4",
+        ref: endAdornmentRef,
+        variant: "inputAdornment",
+        children: endAdornment
+      }
+    ) : null,
+    endAdornment && typeof endAdornment !== "string" && React4.isValidElement(endAdornment) ? React4.cloneElement(endAdornment, {
+      ref: endAdornmentRef
+    }) : null,
+    type === "password" && !hidePasswordToggle && /* @__PURE__ */ jsx(
+      Button,
+      {
+        "aria-label": showPassword ? "Hide password" : "Show password",
+        className: "absolute top-3 right-3",
+        onClick: togglePasswordVisibility,
+        size: "icon",
+        type: "button",
+        variant: "ghost",
+        children: showPassword ? /* @__PURE__ */ jsx(EyeOffIcon, { "aria-hidden": "true", className: "h-4 w-4" }) : /* @__PURE__ */ jsx(EyeIcon, { "aria-hidden": "true", className: "h-4 w-4" })
+      }
+    )
+  ] });
+}, "Input");
+Input.displayName = "Input";
+var LimelightNav = React4.forwardRef(
+  ({ className, items = [], ...props }, ref) => {
+    const [isOpen, setIsOpen] = React4.useState(false);
+    const [search, setSearch] = React4.useState("");
+    React4.useEffect(() => {
+      const down = /* @__PURE__ */ __name((e) => {
+        if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+          e.preventDefault();
+          setIsOpen((open) => !open);
+        }
+      }, "down");
+      document.addEventListener("keydown", down);
+      return () => document.removeEventListener("keydown", down);
+    }, []);
+    const filteredItems = items.filter(
+      (item) => item.label.toLowerCase().includes(search.toLowerCase())
+    );
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "nav",
+        {
+          ref,
+          className: cn("flex items-center gap-4", className),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "outline",
+                onClick: () => setIsOpen(true),
+                className: "relative w-64 justify-start",
+                children: [
+                  /* @__PURE__ */ jsx(Search, { className: "mr-2 h-4 w-4" }),
+                  /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Search..." }),
+                  /* @__PURE__ */ jsxs("kbd", { className: "pointer-events-none absolute right-2 hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex", children: [
+                    /* @__PURE__ */ jsx(Command, { className: "h-3 w-3" }),
+                    "K"
+                  ] })
+                ]
+              }
+            ),
+            items.slice(0, 4).map((item) => /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: item.href,
+                className: "text-sm font-medium transition-colors hover:text-primary",
+                children: item.label
+              },
+              item.href
+            ))
+          ]
+        }
+      ),
+      isOpen && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm",
+          onClick: () => setIsOpen(false),
+          children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-lg border bg-card p-6 shadow-lg",
+              onClick: (e) => e.stopPropagation(),
+              children: [
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    placeholder: "Search navigation...",
+                    value: search,
+                    onChange: (e) => setSearch(e.target.value),
+                    autoFocus: true,
+                    className: "mb-4"
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: "max-h-96 space-y-1 overflow-auto", children: filteredItems.map((item) => /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    href: item.href,
+                    className: "block rounded-md px-4 py-2 hover:bg-accent",
+                    onClick: () => setIsOpen(false),
+                    children: item.label
+                  },
+                  item.href
+                )) })
+              ]
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+LimelightNav.displayName = "LimelightNav";
+
+export { LimelightNav };