@hanzo/ui 5.3.19 → 5.3.22

package/dist/ui/index.mjs

@@ -1 +1,442 @@
-import*as c from'react';import {Loader2,X,Loader2Icon}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}from'react/jsx-runtime';import*as d from'@radix-ui/react-avatar';var ee=Object.defineProperty;var l=(r,t)=>ee(r,"name",{value:t,configurable:true});function a(...r){return twMerge(clsx(r))}l(a,"cn");var se=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",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"}}),x=c.forwardRef(({className:r,variant:t,size:e,asChild:o=false,isLoading:s=false,children:n,...i},p)=>jsxs(o?Slot:"button",{className:a(se({variant:t,size:e,className:r})),ref:p,...i,children:[s?jsx(Loader2,{className:a("h-4 w-4 animate-spin",e!=="icon"&&"mr-2")}):null,s&&e==="icon"?null:n]}));x.displayName="Button";var L=c.forwardRef(({className:r,children:t,dismissible:e=true,onDismiss:o,...s},n)=>{let[i,p]=c.useState(true),m=l(()=>{p(false),o?.();},"handleDismiss");return i?jsxs("div",{ref:n,className:a("relative flex items-center gap-4 rounded-lg border bg-background px-4 py-3 text-sm",r),...s,children:[jsx("div",{className:"flex-1",children:t}),e&&jsxs(x,{variant:"ghost",size:"icon",className:"h-6 w-6",onClick:m,children:[jsx(X,{className:"h-4 w-4"}),jsx("span",{className:"sr-only",children:"Dismiss"})]})]}):null});L.displayName="Announcement";var v=l(({className:r,ref:t,...e})=>jsx(d.Root,{className:a("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",r),ref:t,...e}),"Avatar");v.displayName=d.Root.displayName;var h=l(({className:r,ref:t,...e})=>jsx(d.Image,{className:a("aspect-square h-full w-full",r),ref:t,...e}),"AvatarImage");h.displayName=d.Image.displayName;var g=l(({className:r,ref:t,...e})=>jsx(d.Fallback,{className:a("bg-muted flex h-full w-full items-center justify-center rounded-full",r),ref:t,...e}),"AvatarFallback");g.displayName=d.Fallback.displayName;var C=c.forwardRef(({className:r,items:t,max:e=5,...o},s)=>{let n=t.slice(0,e),i=t.length-e;return jsxs("div",{ref:s,className:a("flex -space-x-4",r),...o,children:[n.map((p,m)=>jsxs(v,{className:"border-2 border-background",children:[jsx(h,{src:p.src,alt:p.alt}),jsx(g,{children:p.fallback})]},m)),i>0&&jsx(v,{className:"border-2 border-background",children:jsxs(g,{children:["+",i]})})]})});C.displayName="AvatarGroup";var B=cva("relative w-full border-b px-4 py-3 text-sm [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",{variants:{variant:{default:"bg-background text-foreground",info:"border-blue-500/50 bg-blue-50 text-blue-900 dark:bg-blue-950 dark:text-blue-100 [&>svg]:text-blue-600 dark:[&>svg]:text-blue-400",success:"border-green-500/50 bg-green-50 text-green-900 dark:bg-green-950 dark:text-green-100 [&>svg]:text-green-600 dark:[&>svg]:text-green-400",warning:"border-yellow-500/50 bg-yellow-50 text-yellow-900 dark:bg-yellow-950 dark:text-yellow-100 [&>svg]:text-yellow-600 dark:[&>svg]:text-yellow-400",error:"border-red-500/50 bg-red-50 text-red-900 dark:bg-red-950 dark:text-red-100 [&>svg]:text-red-600 dark:[&>svg]:text-red-400"}},defaultVariants:{variant:"default"}}),I=c.forwardRef(({className:r,variant:t,onClose:e,children:o,...s},n)=>jsxs("div",{ref:n,role:"alert",className:a(B({variant:t}),r),...s,children:[o,e&&jsxs("button",{type:"button",onClick:e,className:"absolute right-4 top-3 rounded-md p-1 hover:bg-black/5 dark:hover:bg-white/5",children:[jsx(X,{className:"h-4 w-4"}),jsx("span",{className:"sr-only",children:"Close"})]})]}));I.displayName="Banner";var F=c.forwardRef(({className:r,children:t,cursorText:e,cursorSize:o=20,...s},n)=>{let[i,p]=c.useState({x:0,y:0}),[m,f]=c.useState(false),j=l(b=>{let N=b.currentTarget.getBoundingClientRect();p({x:b.clientX-N.left,y:b.clientY-N.top});},"handleMouseMove");return jsxs("div",{ref:n,className:a("relative cursor-none",r),onMouseMove:j,onMouseEnter:()=>f(true),onMouseLeave:()=>f(false),...s,children:[t,m&&jsx("div",{className:"pointer-events-none absolute z-50 flex items-center justify-center rounded-full bg-primary/20 backdrop-blur-sm transition-transform",style:{left:i.x,top:i.y,width:o,height:o,transform:"translate(-50%, -50%)"},children:e&&jsx("span",{className:"text-xs font-medium text-primary",children:e})})]})});F.displayName="Cursor";var _=c.forwardRef(({className:r,children:t,repeat:e=2,reverse:o=false,pauseOnHover:s=false,vertical:n=false,...i},p)=>jsx("div",{ref:p,className:a("group flex overflow-hidden",n?"flex-col":"flex-row",r),...i,children:Array.from({length:e}).map((m,f)=>jsx("div",{className:a("flex shrink-0",n?"animate-marquee-vertical flex-col":"animate-marquee",o&&"[animation-direction:reverse]",s&&"group-hover:[animation-play-state:paused]"),children:t},f))}));_.displayName="Marquee";var U=cva("inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium transition-colors",{variants:{variant:{default:"bg-primary/10 text-primary hover:bg-primary/20",secondary:"bg-secondary text-secondary-foreground hover:bg-secondary/80",outline:"border border-input bg-background hover:bg-accent hover:text-accent-foreground",success:"bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",warning:"bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",error:"bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400"}},defaultVariants:{variant:"default"}}),W=c.forwardRef(({className:r,variant:t,onRemove:e,children:o,...s},n)=>jsxs("span",{ref:n,className:a(U({variant:t}),r),...s,children:[o,e&&jsxs("button",{type:"button",onClick:e,className:"ml-0.5 rounded-full p-0.5 hover:bg-black/10 dark:hover:bg-white/10",children:[jsx(X,{className:"h-3 w-3"}),jsx("span",{className:"sr-only",children:"Remove"})]})]}));W.displayName="Pill";function ge({className:r,...t}){return jsx(Loader2Icon,{role:"status","aria-label":"Loading",className:a("size-4 animate-spin",r),...t})}l(ge,"Spinner");var ye=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"}}),w=c.forwardRef(({className:r,variant:t,...e},o)=>jsx("div",{ref:o,className:a(ye({variant:t}),r),...e}));w.displayName="Badge";var K=c.forwardRef(({className:r,tags:t,onRemove:e,variant:o="default",...s},n)=>jsx("div",{ref:n,className:a("flex flex-wrap gap-2",r),...s,children:t.map(i=>jsxs(w,{variant:o,className:a("gap-1",e&&"pr-1"),children:[i.label,e&&jsxs("button",{type:"button",onClick:()=>e(i.id),className:"ml-1 rounded-full p-0.5 hover:bg-black/10 dark:hover:bg-white/10",children:[jsx(X,{className:"h-3 w-3"}),jsxs("span",{className:"sr-only",children:["Remove ",i.label]})]})]},i.id))}));K.displayName="Tags";var Z=c.forwardRef(({className:r,children:t,speed:e=50,direction:o="left",pauseOnHover:s=true,...n},i)=>jsx("div",{ref:i,className:a("group relative overflow-hidden",r),...n,children:jsxs("div",{className:a("flex w-fit animate-scroll",s&&"group-hover:[animation-play-state:paused]"),style:{animationDuration:`${e}s`,animationDirection:o==="right"?"reverse":"normal"},children:[t,t]})}));Z.displayName="Ticker";export{L as Announcement,C as AvatarGroup,I as Banner,F as Cursor,_ as Marquee,W as Pill,ge as Spinner,K as Tags,Z as Ticker,B as bannerVariants,U as pillVariants};
+"use client";
+import * as React5 from 'react';
+import { Loader2, X, Loader2Icon } 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 } from 'react/jsx-runtime';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+
+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 = React5.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 Announcement = React5.forwardRef(
+  ({ className, children, dismissible = true, onDismiss, ...props }, ref) => {
+    const [isVisible, setIsVisible] = React5.useState(true);
+    const handleDismiss = /* @__PURE__ */ __name(() => {
+      setIsVisible(false);
+      onDismiss?.();
+    }, "handleDismiss");
+    if (!isVisible) return null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "relative flex items-center gap-4 rounded-lg border bg-background px-4 py-3 text-sm",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex-1", children }),
+          dismissible && /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "h-6 w-6",
+              onClick: handleDismiss,
+              children: [
+                /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Dismiss" })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Announcement.displayName = "Announcement";
+var Avatar = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Root,
+  {
+    className: cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    ),
+    ref,
+    ...props
+  }
+), "Avatar");
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+var AvatarImage = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Image,
+  {
+    className: cn("aspect-square h-full w-full", className),
+    ref,
+    ...props
+  }
+), "AvatarImage");
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+var AvatarFallback = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Fallback,
+  {
+    className: cn(
+      "bg-muted flex h-full w-full items-center justify-center rounded-full",
+      className
+    ),
+    ref,
+    ...props
+  }
+), "AvatarFallback");
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+var AvatarGroup = React5.forwardRef(
+  ({ className, items, max = 5, ...props }, ref) => {
+    const displayItems = items.slice(0, max);
+    const remaining = items.length - max;
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex -space-x-4", className), ...props, children: [
+      displayItems.map((item, index) => /* @__PURE__ */ jsxs(Avatar, { className: "border-2 border-background", children: [
+        /* @__PURE__ */ jsx(AvatarImage, { src: item.src, alt: item.alt }),
+        /* @__PURE__ */ jsx(AvatarFallback, { children: item.fallback })
+      ] }, index)),
+      remaining > 0 && /* @__PURE__ */ jsx(Avatar, { className: "border-2 border-background", children: /* @__PURE__ */ jsxs(AvatarFallback, { children: [
+        "+",
+        remaining
+      ] }) })
+    ] });
+  }
+);
+AvatarGroup.displayName = "AvatarGroup";
+var bannerVariants = cva(
+  "relative w-full border-b px-4 py-3 text-sm [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        info: "border-blue-500/50 bg-blue-50 text-blue-900 dark:bg-blue-950 dark:text-blue-100 [&>svg]:text-blue-600 dark:[&>svg]:text-blue-400",
+        success: "border-green-500/50 bg-green-50 text-green-900 dark:bg-green-950 dark:text-green-100 [&>svg]:text-green-600 dark:[&>svg]:text-green-400",
+        warning: "border-yellow-500/50 bg-yellow-50 text-yellow-900 dark:bg-yellow-950 dark:text-yellow-100 [&>svg]:text-yellow-600 dark:[&>svg]:text-yellow-400",
+        error: "border-red-500/50 bg-red-50 text-red-900 dark:bg-red-950 dark:text-red-100 [&>svg]:text-red-600 dark:[&>svg]:text-red-400"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var Banner = React5.forwardRef(
+  ({ className, variant, onClose, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "alert",
+        className: cn(bannerVariants({ variant }), className),
+        ...props,
+        children: [
+          children,
+          onClose && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              className: "absolute right-4 top-3 rounded-md p-1 hover:bg-black/5 dark:hover:bg-white/5",
+              children: [
+                /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Banner.displayName = "Banner";
+var Cursor = React5.forwardRef(
+  ({ className, children, cursorText, cursorSize = 20, ...props }, ref) => {
+    const [position, setPosition] = React5.useState({ x: 0, y: 0 });
+    const [isHovered, setIsHovered] = React5.useState(false);
+    const handleMouseMove = /* @__PURE__ */ __name((e) => {
+      const rect = e.currentTarget.getBoundingClientRect();
+      setPosition({
+        x: e.clientX - rect.left,
+        y: e.clientY - rect.top
+      });
+    }, "handleMouseMove");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("relative cursor-none", className),
+        onMouseMove: handleMouseMove,
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        ...props,
+        children: [
+          children,
+          isHovered && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "pointer-events-none absolute z-50 flex items-center justify-center rounded-full bg-primary/20 backdrop-blur-sm transition-transform",
+              style: {
+                left: position.x,
+                top: position.y,
+                width: cursorSize,
+                height: cursorSize,
+                transform: "translate(-50%, -50%)"
+              },
+              children: cursorText && /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-primary", children: cursorText })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Cursor.displayName = "Cursor";
+var Marquee = React5.forwardRef(
+  ({
+    className,
+    children,
+    repeat = 2,
+    reverse = false,
+    pauseOnHover = false,
+    vertical = false,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "group flex overflow-hidden",
+          vertical ? "flex-col" : "flex-row",
+          className
+        ),
+        ...props,
+        children: Array.from({ length: repeat }).map((_, i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex shrink-0",
+              vertical ? "animate-marquee-vertical flex-col" : "animate-marquee",
+              reverse && (vertical ? "[animation-direction:reverse]" : "[animation-direction:reverse]"),
+              pauseOnHover && "group-hover:[animation-play-state:paused]"
+            ),
+            children
+          },
+          i
+        ))
+      }
+    );
+  }
+);
+Marquee.displayName = "Marquee";
+var pillVariants = cva(
+  "inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary/10 text-primary hover:bg-primary/20",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        success: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
+        warning: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",
+        error: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var Pill = React5.forwardRef(
+  ({ className, variant, onRemove, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        className: cn(pillVariants({ variant }), className),
+        ...props,
+        children: [
+          children,
+          onRemove && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: onRemove,
+              className: "ml-0.5 rounded-full p-0.5 hover:bg-black/10 dark:hover:bg-white/10",
+              children: [
+                /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Remove" })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Pill.displayName = "Pill";
+function Spinner({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Loader2Icon,
+    {
+      role: "status",
+      "aria-label": "Loading",
+      className: cn("size-4 animate-spin", className),
+      ...props
+    }
+  );
+}
+__name(Spinner, "Spinner");
+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 = React5.forwardRef(
+  ({ className, variant, ...props }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(badgeVariants({ variant }), className), ...props });
+  }
+);
+Badge.displayName = "Badge";
+var Tags = React5.forwardRef(
+  ({ className, tags, onRemove, variant = "default", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("flex flex-wrap gap-2", className),
+        ...props,
+        children: tags.map((tag) => /* @__PURE__ */ jsxs(
+          Badge,
+          {
+            variant,
+            className: cn("gap-1", onRemove && "pr-1"),
+            children: [
+              tag.label,
+              onRemove && /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => onRemove(tag.id),
+                  className: "ml-1 rounded-full p-0.5 hover:bg-black/10 dark:hover:bg-white/10",
+                  children: [
+                    /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }),
+                    /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+                      "Remove ",
+                      tag.label
+                    ] })
+                  ]
+                }
+              )
+            ]
+          },
+          tag.id
+        ))
+      }
+    );
+  }
+);
+Tags.displayName = "Tags";
+var Ticker = React5.forwardRef(
+  ({
+    className,
+    children,
+    speed = 50,
+    direction = "left",
+    pauseOnHover = true,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("group relative overflow-hidden", className),
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex w-fit animate-scroll",
+              pauseOnHover && "group-hover:[animation-play-state:paused]"
+            ),
+            style: {
+              animationDuration: `${speed}s`,
+              animationDirection: direction === "right" ? "reverse" : "normal"
+            },
+            children: [
+              children,
+              children
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+Ticker.displayName = "Ticker";
+
+export { Announcement, AvatarGroup, Banner, Cursor, Marquee, Pill, Spinner, Tags, Ticker, bannerVariants, pillVariants };

package/dist/ui/marquee.js

@@ -1 +1,74 @@
-'use strict';var i=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),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 i__namespace=/*#__PURE__*/_interopNamespace(i);var p=Object.defineProperty;var o=(e,r)=>p(e,"name",{value:r,configurable:true});function t(...e){return tailwindMerge.twMerge(clsx.clsx(e))}o(t,"cn");var x=i__namespace.forwardRef(({className:e,children:r,repeat:s=2,reverse:l=false,pauseOnHover:m=false,vertical:a=false,...u},c)=>jsxRuntime.jsx("div",{ref:c,className:t("group flex overflow-hidden",a?"flex-col":"flex-row",e),...u,children:Array.from({length:s}).map((g,f)=>jsxRuntime.jsx("div",{className:t("flex shrink-0",a?"animate-marquee-vertical flex-col":"animate-marquee",l&&"[animation-direction:reverse]",m&&"group-hover:[animation-play-state:paused]"),children:r},f))}));x.displayName="Marquee";exports.Marquee=x;
+"use client";
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+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 React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+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 Marquee = React__namespace.forwardRef(
+  ({
+    className,
+    children,
+    repeat = 2,
+    reverse = false,
+    pauseOnHover = false,
+    vertical = false,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "group flex overflow-hidden",
+          vertical ? "flex-col" : "flex-row",
+          className
+        ),
+        ...props,
+        children: Array.from({ length: repeat }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "flex shrink-0",
+              vertical ? "animate-marquee-vertical flex-col" : "animate-marquee",
+              reverse && (vertical ? "[animation-direction:reverse]" : "[animation-direction:reverse]"),
+              pauseOnHover && "group-hover:[animation-play-state:paused]"
+            ),
+            children
+          },
+          i
+        ))
+      }
+    );
+  }
+);
+Marquee.displayName = "Marquee";
+
+exports.Marquee = Marquee;

package/dist/ui/marquee.mjs

@@ -1 +1,52 @@
-import*as i from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsx}from'react/jsx-runtime';var p=Object.defineProperty;var o=(e,r)=>p(e,"name",{value:r,configurable:true});function t(...e){return twMerge(clsx(e))}o(t,"cn");var x=i.forwardRef(({className:e,children:r,repeat:s=2,reverse:l=false,pauseOnHover:m=false,vertical:a=false,...u},c)=>jsx("div",{ref:c,className:t("group flex overflow-hidden",a?"flex-col":"flex-row",e),...u,children:Array.from({length:s}).map((g,f)=>jsx("div",{className:t("flex shrink-0",a?"animate-marquee-vertical flex-col":"animate-marquee",l&&"[animation-direction:reverse]",m&&"group-hover:[animation-play-state:paused]"),children:r},f))}));x.displayName="Marquee";export{x as Marquee};
+"use client";
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } 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 Marquee = React.forwardRef(
+  ({
+    className,
+    children,
+    repeat = 2,
+    reverse = false,
+    pauseOnHover = false,
+    vertical = false,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "group flex overflow-hidden",
+          vertical ? "flex-col" : "flex-row",
+          className
+        ),
+        ...props,
+        children: Array.from({ length: repeat }).map((_, i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex shrink-0",
+              vertical ? "animate-marquee-vertical flex-col" : "animate-marquee",
+              reverse && (vertical ? "[animation-direction:reverse]" : "[animation-direction:reverse]"),
+              pauseOnHover && "group-hover:[animation-play-state:paused]"
+            ),
+            children
+          },
+          i
+        ))
+      }
+    );
+  }
+);
+Marquee.displayName = "Marquee";
+
+export { Marquee };

package/dist/ui/pill.js

@@ -1 +1,85 @@
-'use strict';var s=require('react'),classVarianceAuthority=require('class-variance-authority'),lucideReact=require('lucide-react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),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 s__namespace=/*#__PURE__*/_interopNamespace(s);var d=Object.defineProperty;var a=(e,r)=>d(e,"name",{value:r,configurable:true});function n(...e){return tailwindMerge.twMerge(clsx.clsx(e))}a(n,"cn");var f=classVarianceAuthority.cva("inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium transition-colors",{variants:{variant:{default:"bg-primary/10 text-primary hover:bg-primary/20",secondary:"bg-secondary text-secondary-foreground hover:bg-secondary/80",outline:"border border-input bg-background hover:bg-accent hover:text-accent-foreground",success:"bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",warning:"bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",error:"bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400"}},defaultVariants:{variant:"default"}}),y=s__namespace.forwardRef(({className:e,variant:r,onRemove:t,children:i,...p},c)=>jsxRuntime.jsxs("span",{ref:c,className:n(f({variant:r}),e),...p,children:[i,t&&jsxRuntime.jsxs("button",{type:"button",onClick:t,className:"ml-0.5 rounded-full p-0.5 hover:bg-black/10 dark:hover:bg-white/10",children:[jsxRuntime.jsx(lucideReact.X,{className:"h-3 w-3"}),jsxRuntime.jsx("span",{className:"sr-only",children:"Remove"})]})]}));y.displayName="Pill";exports.Pill=y;exports.pillVariants=f;
+"use client";
+'use strict';
+
+var React = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var lucideReact = require('lucide-react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+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 React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+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 pillVariants = classVarianceAuthority.cva(
+  "inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary/10 text-primary hover:bg-primary/20",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        success: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
+        warning: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",
+        error: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var Pill = React__namespace.forwardRef(
+  ({ className, variant, onRemove, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        ref,
+        className: cn(pillVariants({ variant }), className),
+        ...props,
+        children: [
+          children,
+          onRemove && /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: onRemove,
+              className: "ml-0.5 rounded-full p-0.5 hover:bg-black/10 dark:hover:bg-white/10",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-3 w-3" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Remove" })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Pill.displayName = "Pill";
+
+exports.Pill = Pill;
+exports.pillVariants = pillVariants;