@hanzo/ui 5.0.0 → 5.0.2

package/primitives/action-button.tsx

@@ -0,0 +1,42 @@
+'use client'
+import React from 'react'
+
+import { cn, type VariantProps } from '../util'
+
+import type { ButtonDef, ButtonModalDef } from '../types'
+import type { buttonVariants } from './button'
+import DVC from './dialog-video-controller'
+
+const ActionButton: React.FC<
+  VariantProps<typeof buttonVariants> &
+  {
+    def: ButtonDef
+    className?: string
+  }
+> = ({
+  def,
+  className='',
+  ...rest
+}) => {
+  if (def.action.type === 'modal') {
+    const m = def.action.def as ButtonModalDef
+    const Modal = m.Comp
+    return (
+      <DVC>
+        <Modal 
+          title={m.title}
+          byline={m.byline}
+          buttonText={def.text}
+          buttonProps={{...def.props, ...rest, className: cn((def.props?.className ?? ''), className)}}
+          action={m.action}
+          actionEnclosure={m.actionEnclosure}
+          {...m.props}
+        />
+      </DVC>
+    )
+  }
+    // no other types supported yet
+  return <></>
+}
+
+export default ActionButton

package/primitives/alert-dialog.tsx

@@ -0,0 +1,185 @@
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import React from 'react';
+
+import { cn } from '../src/utils';
+import { buttonVariants } from './button';
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+type AlertDialogOverlayProps = React.ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Overlay
+> & {
+  ref?: React.RefObject<
+    React.ComponentRef<typeof AlertDialogPrimitive.Overlay>
+  >;
+};
+
+const AlertDialogOverlay = ({
+  className,
+  children,
+  ref,
+  ...props
+}: AlertDialogOverlayProps) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm',
+      'bg-bg-dark/90',
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+);
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+type AlertDialogContentProps = React.ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Content
+> & {
+  ref?: React.RefObject<
+    React.ComponentRef<typeof AlertDialogPrimitive.Content>
+  >;
+};
+
+const AlertDialogContent = ({
+  className,
+  ref,
+  ...props
+}: AlertDialogContentProps) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      className={cn(
+        'bg-bg-default data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 border-divider fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  </AlertDialogPortal>
+);
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-2 text-center sm:text-left',
+      className,
+    )}
+    {...props}
+  />
+);
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex', className)} {...props} />
+);
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+
+type AlertDialogTitleProps = React.ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Title
+> & {
+  ref?: React.RefObject<React.ComponentRef<typeof AlertDialogPrimitive.Title>>;
+};
+
+const AlertDialogTitle = ({
+  className,
+  ref,
+  ...props
+}: AlertDialogTitleProps) => (
+  <AlertDialogPrimitive.Title
+    className={cn('text-lg font-semibold', className)}
+    ref={ref}
+    {...props}
+  />
+);
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+type AlertDialogDescriptionProps = React.ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Description
+> & {
+  ref?: React.RefObject<
+    React.ComponentRef<typeof AlertDialogPrimitive.Description>
+  >;
+};
+
+const AlertDialogDescription = ({
+  className,
+  ref,
+  ...props
+}: AlertDialogDescriptionProps) => (
+  <AlertDialogPrimitive.Description
+    className={cn('text-text-secondary text-sm', className)}
+    ref={ref}
+    {...props}
+  />
+);
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName;
+
+type AlertDialogActionProps = React.ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Action
+> & {
+  ref?: React.RefObject<React.ComponentRef<typeof AlertDialogPrimitive.Action>>;
+};
+
+const AlertDialogAction = ({
+  className,
+  ref,
+  ...props
+}: AlertDialogActionProps) => (
+  <AlertDialogPrimitive.Action
+    className={cn(
+      buttonVariants({ variant: 'default', size: 'sm' }),
+      className,
+    )}
+    ref={ref}
+    {...props}
+  />
+);
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+type AlertDialogCancelProps = React.ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Cancel
+> & {
+  ref?: React.RefObject<React.ComponentRef<typeof AlertDialogPrimitive.Cancel>>;
+};
+
+const AlertDialogCancel = ({
+  className,
+  ref,
+  ...props
+}: AlertDialogCancelProps) => (
+  <AlertDialogPrimitive.Cancel
+    className={cn(
+      buttonVariants({ variant: 'outline', size: 'sm' }),
+      className,
+    )}
+    ref={ref}
+    {...props}
+  />
+);
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

package/primitives/alert.tsx

@@ -0,0 +1,74 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import React from 'react';
+
+import { cn } from '../src/utils';
+
+const alertVariants = cva(
+  '[&>svg]:text-text-default relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:top-4 [&>svg]:left-4 [&>svg+div]:translate-y-[-3px] [&>svg~*]:pl-7',
+  {
+    variants: {
+      variant: {
+        default: 'bg-bg-tertiary text-text-default',
+        info: 'text-text-secondary [&>svg]:text-text-secondary bg-gray-250 border-gray-100 border-gray-200',
+        destructive:
+          'border-[#4d0408] bg-[#2d0607] text-[#ff9ea1] [&>svg]:text-[#ff9ea1]',
+        warning:
+          'border-yellow-800 bg-yellow-900 text-yellow-400 [&>svg]:text-yellow-400',
+        success:
+          'border-green-800 bg-green-900 text-green-400 [&>svg]:text-green-400',
+        download:
+          'border-gray-800 bg-gray-900 text-cyan-400 [&>svg]:text-cyan-400',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+type AlertProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof alertVariants> & {
+    ref?: React.RefObject<HTMLDivElement>;
+  };
+
+const Alert = ({ className, variant, ref, ...props }: AlertProps) => (
+  <div
+    className={cn(alertVariants({ variant }), className)}
+    ref={ref}
+    role="alert"
+    {...props}
+  />
+);
+Alert.displayName = 'Alert';
+
+type AlertTitleProps = React.HTMLAttributes<HTMLHeadingElement> & {
+  ref?: React.RefObject<HTMLParagraphElement>;
+};
+
+const AlertTitle = ({ className, ref, ...props }: AlertTitleProps) => (
+  <h5
+    className={cn('mb-1 leading-none font-medium tracking-tight', className)}
+    ref={ref}
+    {...props}
+  />
+);
+AlertTitle.displayName = 'AlertTitle';
+
+type AlertDescriptionProps = React.HTMLAttributes<HTMLParagraphElement> & {
+  ref?: React.RefObject<HTMLParagraphElement>;
+};
+
+const AlertDescription = ({
+  className,
+  ref,
+  ...props
+}: AlertDescriptionProps) => (
+  <div
+    className={cn('text-sm [&_p]:leading-relaxed', className)}
+    ref={ref}
+    {...props}
+  />
+);
+AlertDescription.displayName = 'AlertDescription';
+
+export { Alert, AlertTitle, AlertDescription };

package/primitives/apply-typography.tsx

@@ -0,0 +1,55 @@
+import React, { PropsWithChildren } from 'react'
+
+import { cn } from '../util'
+
+type TypographySize = 'responsive' | 'sm' | 'base' | 'lg' | 'xl' // if t-shirt size, do *not* be responsive
+
+const ApplyTypography: React.FC<
+  React.ComponentProps<'div'> & {
+    asTag?: 'div' | 'section' | 'nav' | 'main' | 'article',
+    size?: TypographySize
+  }
+> = ({ 
+  children,
+  className='',
+  asTag='div',
+  size='responsive',
+  ...rest
+}) => {
+
+    // responsive version by default
+  let typoClasses = 
+    'typography gap-3 ' +
+    'xs:typography-sm ' + 
+    'sm:typography sm:gap-4 ' +
+    'lg:typography-lg lg:gap-5 ' + 
+    'xl:typography-xl xl:gap-6 ' + 
+    'typography-headings:font-heading ' // only effects h1-h3 (in plugin)
+
+  switch (size) {
+    case 'sm': {
+      typoClasses = 'typography typography-sm gap-3 typography-headings:font-heading typography-p:text-sm '
+    } break
+    case 'base': {
+      typoClasses = 'typography gap-4 typography-headings:font-heading '
+    } break
+    case 'lg': {
+      typoClasses = 'typography typography-lg gap-5 typography-headings:font-heading typography-p:text-lg '
+    } break
+    case 'xl': {
+      typoClasses = 'typography typography-xl gap-6 typography-headings:font-heading typography-p:text-lg '
+    } break
+  }
+  
+  const Tag = asTag
+  return (
+    <Tag {...rest} className={cn(typoClasses, className)}>
+      {children}
+    </Tag>
+  )
+}
+
+export {
+  type TypographySize,
+  ApplyTypography as default
+}

package/primitives/aspect-ratio.tsx

@@ -0,0 +1,5 @@
+"use client"
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+const AspectRatio = AspectRatioPrimitive.Root
+
+export default AspectRatio

package/primitives/avatar.tsx

@@ -0,0 +1,57 @@
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import React from 'react';
+
+import { cn } from '../src/utils';
+
+type AvatarProps = React.ComponentPropsWithoutRef<
+  typeof AvatarPrimitive.Root
+> & {
+  ref?: React.RefObject<React.ComponentRef<typeof AvatarPrimitive.Root>>;
+};
+
+const Avatar = ({ className, ref, ...props }: AvatarProps) => (
+  <AvatarPrimitive.Root
+    className={cn(
+      'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
+      className,
+    )}
+    ref={ref}
+    {...props}
+  />
+);
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+type AvatarImageProps = React.ComponentPropsWithoutRef<
+  typeof AvatarPrimitive.Image
+> & {
+  ref?: React.RefObject<React.ComponentRef<typeof AvatarPrimitive.Image>>;
+};
+
+const AvatarImage = ({ className, ref, ...props }: AvatarImageProps) => (
+  <AvatarPrimitive.Image
+    className={cn('aspect-square h-full w-full', className)}
+    ref={ref}
+    {...props}
+  />
+);
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+type AvatarFallbackProps = React.ComponentPropsWithoutRef<
+  typeof AvatarPrimitive.Fallback
+> & {
+  ref?: React.RefObject<React.ComponentRef<typeof AvatarPrimitive.Fallback>>;
+};
+
+const AvatarFallback = ({ className, ref, ...props }: AvatarFallbackProps) => (
+  <AvatarPrimitive.Fallback
+    className={cn(
+      'bg-muted flex h-full w-full items-center justify-center rounded-full',
+      className,
+    )}
+    ref={ref}
+    {...props}
+  />
+);
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };

package/primitives/background-beams.tsx

@@ -0,0 +1,142 @@
+import { motion } from 'framer-motion';
+import React from 'react';
+
+import { cn } from '../src/utils';
+
+export const BackgroundBeams = React.memo(
+  ({ className }: { className?: string }) => {
+    const paths = [
+      'M-380 -189C-380 -189 -312 216 152 343C616 470 684 875 684 875',
+      'M-373 -197C-373 -197 -305 208 159 335C623 462 691 867 691 867',
+      'M-366 -205C-366 -205 -298 200 166 327C630 454 698 859 698 859',
+      'M-359 -213C-359 -213 -291 192 173 319C637 446 705 851 705 851',
+      'M-352 -221C-352 -221 -284 184 180 311C644 438 712 843 712 843',
+      'M-345 -229C-345 -229 -277 176 187 303C651 430 719 835 719 835',
+      'M-338 -237C-338 -237 -270 168 194 295C658 422 726 827 726 827',
+      'M-331 -245C-331 -245 -263 160 201 287C665 414 733 819 733 819',
+      'M-324 -253C-324 -253 -256 152 208 279C672 406 740 811 740 811',
+      'M-317 -261C-317 -261 -249 144 215 271C679 398 747 803 747 803',
+      'M-310 -269C-310 -269 -242 136 222 263C686 390 754 795 754 795',
+      'M-303 -277C-303 -277 -235 128 229 255C693 382 761 787 761 787',
+      'M-296 -285C-296 -285 -228 120 236 247C700 374 768 779 768 779',
+      'M-289 -293C-289 -293 -221 112 243 239C707 366 775 771 775 771',
+      'M-282 -301C-282 -301 -214 104 250 231C714 358 782 763 782 763',
+      'M-275 -309C-275 -309 -207 96 257 223C721 350 789 755 789 755',
+      'M-268 -317C-268 -317 -200 88 264 215C728 342 796 747 796 747',
+      'M-261 -325C-261 -325 -193 80 271 207C735 334 803 739 803 739',
+      'M-254 -333C-254 -333 -186 72 278 199C742 326 810 731 810 731',
+      'M-247 -341C-247 -341 -179 64 285 191C749 318 817 723 817 723',
+      'M-240 -349C-240 -349 -172 56 292 183C756 310 824 715 824 715',
+      'M-233 -357C-233 -357 -165 48 299 175C763 302 831 707 831 707',
+
+      'M-226 -365C-226 -365 -158 40 306 167C770 294 838 699 838 699',
+      'M-219 -373C-219 -373 -151 32 313 159C777 286 845 691 845 691',
+      'M-212 -381C-212 -381 -144 24 320 151C784 278 852 683 852 683',
+      'M-205 -389C-205 -389 -137 16 327 143C791 270 859 675 859 675',
+      'M-198 -397C-198 -397 -130 8 334 135C798 262 866 667 866 667',
+      'M-191 -405C-191 -405 -123 0 341 127C805 254 873 659 873 659',
+      'M-184 -413C-184 -413 -116 -8 348 119C812 246 880 651 880 651',
+      'M-177 -421C-177 -421 -109 -16 355 111C819 238 887 643 887 643',
+      'M-170 -429C-170 -429 -102 -24 362 103C826 230 894 635 894 635',
+      'M-163 -437C-163 -437 -95 -32 369 95C833 222 901 627 901 627',
+      'M-156 -445C-156 -445 -88 -40 376 87C840 214 908 619 908 619',
+      'M-149 -453C-149 -453 -81 -48 383 79C847 206 915 611 915 611',
+      'M-142 -461C-142 -461 -74 -56 390 71C854 198 922 603 922 603',
+      'M-135 -469C-135 -469 -67 -64 397 63C861 190 929 595 929 595',
+      'M-128 -477C-128 -477 -60 -72 404 55C868 182 936 587 936 587',
+      'M-121 -485C-121 -485 -53 -80 411 47C875 174 943 579 943 579',
+      'M-114 -493C-114 -493 -46 -88 418 39C882 166 950 571 950 571',
+      'M-107 -501C-107 -501 -39 -96 425 31C889 158 957 563 957 563',
+      'M-100 -509C-100 -509 -32 -104 432 23C896 150 964 555 964 555',
+      'M-93 -517C-93 -517 -25 -112 439 15C903 142 971 547 971 547',
+      'M-86 -525C-86 -525 -18 -120 446 7C910 134 978 539 978 539',
+      'M-79 -533C-79 -533 -11 -128 453 -1C917 126 985 531 985 531',
+      'M-72 -541C-72 -541 -4 -136 460 -9C924 118 992 523 992 523',
+      'M-65 -549C-65 -549 3 -144 467 -17C931 110 999 515 999 515',
+      'M-58 -557C-58 -557 10 -152 474 -25C938 102 1006 507 1006 507',
+      'M-51 -565C-51 -565 17 -160 481 -33C945 94 1013 499 1013 499',
+      'M-44 -573C-44 -573 24 -168 488 -41C952 86 1020 491 1020 491',
+      'M-37 -581C-37 -581 31 -176 495 -49C959 78 1027 483 1027 483',
+    ];
+    return (
+      <div
+        className={cn(
+          'absolute inset-0 flex h-full w-full items-center justify-center [mask-size:40px] [mask-repeat:no-repeat]',
+          className,
+        )}
+      >
+        <svg
+          className="pointer-events-none absolute z-0 h-full w-full"
+          fill="none"
+          height="100%"
+          viewBox="0 0 696 316"
+          width="100%"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M-380 -189C-380 -189 -312 216 152 343C616 470 684 875 684 875M-373 -197C-373 -197 -305 208 159 335C623 462 691 867 691 867M-366 -205C-366 -205 -298 200 166 327C630 454 698 859 698 859M-359 -213C-359 -213 -291 192 173 319C637 446 705 851 705 851M-352 -221C-352 -221 -284 184 180 311C644 438 712 843 712 843M-345 -229C-345 -229 -277 176 187 303C651 430 719 835 719 835M-338 -237C-338 -237 -270 168 194 295C658 422 726 827 726 827M-331 -245C-331 -245 -263 160 201 287C665 414 733 819 733 819M-324 -253C-324 -253 -256 152 208 279C672 406 740 811 740 811M-317 -261C-317 -261 -249 144 215 271C679 398 747 803 747 803M-310 -269C-310 -269 -242 136 222 263C686 390 754 795 754 795M-303 -277C-303 -277 -235 128 229 255C693 382 761 787 761 787M-296 -285C-296 -285 -228 120 236 247C700 374 768 779 768 779M-289 -293C-289 -293 -221 112 243 239C707 366 775 771 775 771M-282 -301C-282 -301 -214 104 250 231C714 358 782 763 782 763M-275 -309C-275 -309 -207 96 257 223C721 350 789 755 789 755M-268 -317C-268 -317 -200 88 264 215C728 342 796 747 796 747M-261 -325C-261 -325 -193 80 271 207C735 334 803 739 803 739M-254 -333C-254 -333 -186 72 278 199C742 326 810 731 810 731M-247 -341C-247 -341 -179 64 285 191C749 318 817 723 817 723M-240 -349C-240 -349 -172 56 292 183C756 310 824 715 824 715M-233 -357C-233 -357 -165 48 299 175C763 302 831 707 831 707M-226 -365C-226 -365 -158 40 306 167C770 294 838 699 838 699M-219 -373C-219 -373 -151 32 313 159C777 286 845 691 845 691M-212 -381C-212 -381 -144 24 320 151C784 278 852 683 852 683M-205 -389C-205 -389 -137 16 327 143C791 270 859 675 859 675M-198 -397C-198 -397 -130 8 334 135C798 262 866 667 866 667M-191 -405C-191 -405 -123 0 341 127C805 254 873 659 873 659M-184 -413C-184 -413 -116 -8 348 119C812 246 880 651 880 651M-177 -421C-177 -421 -109 -16 355 111C819 238 887 643 887 643M-170 -429C-170 -429 -102 -24 362 103C826 230 894 635 894 635M-163 -437C-163 -437 -95 -32 369 95C833 222 901 627 901 627M-156 -445C-156 -445 -88 -40 376 87C840 214 908 619 908 619M-149 -453C-149 -453 -81 -48 383 79C847 206 915 611 915 611M-142 -461C-142 -461 -74 -56 390 71C854 198 922 603 922 603M-135 -469C-135 -469 -67 -64 397 63C861 190 929 595 929 595M-128 -477C-128 -477 -60 -72 404 55C868 182 936 587 936 587M-121 -485C-121 -485 -53 -80 411 47C875 174 943 579 943 579M-114 -493C-114 -493 -46 -88 418 39C882 166 950 571 950 571M-107 -501C-107 -501 -39 -96 425 31C889 158 957 563 957 563M-100 -509C-100 -509 -32 -104 432 23C896 150 964 555 964 555M-93 -517C-93 -517 -25 -112 439 15C903 142 971 547 971 547M-86 -525C-86 -525 -18 -120 446 7C910 134 978 539 978 539M-79 -533C-79 -533 -11 -128 453 -1C917 126 985 531 985 531M-72 -541C-72 -541 -4 -136 460 -9C924 118 992 523 992 523M-65 -549C-65 -549 3 -144 467 -17C931 110 999 515 999 515M-58 -557C-58 -557 10 -152 474 -25C938 102 1006 507 1006 507M-51 -565C-51 -565 17 -160 481 -33C945 94 1013 499 1013 499M-44 -573C-44 -573 24 -168 488 -41C952 86 1020 491 1020 491M-37 -581C-37 -581 31 -176 495 -49C959 78 1027 483 1027 483M-30 -589C-30 -589 38 -184 502 -57C966 70 1034 475 1034 475M-23 -597C-23 -597 45 -192 509 -65C973 62 1041 467 1041 467M-16 -605C-16 -605 52 -200 516 -73C980 54 1048 459 1048 459M-9 -613C-9 -613 59 -208 523 -81C987 46 1055 451 1055 451M-2 -621C-2 -621 66 -216 530 -89C994 38 1062 443 1062 443M5 -629C5 -629 73 -224 537 -97C1001 30 1069 435 1069 435M12 -637C12 -637 80 -232 544 -105C1008 22 1076 427 1076 427M19 -645C19 -645 87 -240 551 -113C1015 14 1083 419 1083 419"
+            stroke="url(#paint0_radial_242_278)"
+            strokeOpacity="0.05"
+            strokeWidth="0.5"
+          />
+
+          {paths.map((path, index) => (
+            <motion.path
+              d={path}
+              key={`path-` + index}
+              stroke={`url(#linearGradient-${index})`}
+              strokeOpacity="0.4"
+              strokeWidth="0.5"
+            />
+          ))}
+          <defs>
+            {paths.map((path, index) => (
+              <motion.linearGradient
+                animate={{
+                  x1: ['0%', '100%'],
+                  x2: ['0%', '95%'],
+                  y1: ['0%', '100%'],
+                  y2: ['0%', `${93 + Math.random() * 8}%`],
+                }}
+                id={`linearGradient-${index}`}
+                initial={{
+                  x1: '0%',
+                  x2: '0%',
+                  y1: '0%',
+                  y2: '0%',
+                }}
+                key={`gradient-${index}`}
+                transition={{
+                  duration: Math.random() * 10 + 10,
+                  ease: 'easeInOut',
+                  repeat: Infinity,
+                  delay: Math.random() * 10,
+                }}
+              >
+                <stop stopColor="#18CCFC" stopOpacity="0" />
+                <stop stopColor="#18CCFC" />
+                <stop offset="32.5%" stopColor="#6344F5" />
+                <stop offset="100%" stopColor="#AE48FF" stopOpacity="0" />
+              </motion.linearGradient>
+            ))}
+
+            <radialGradient
+              cx="0"
+              cy="0"
+              gradientTransform="translate(352 34) rotate(90) scale(555 1560.62)"
+              gradientUnits="userSpaceOnUse"
+              id="paint0_radial_242_278"
+              r="1"
+            >
+              <stop offset="0.0666667" stopColor="var(--neutral-300)" />
+              <stop offset="0.243243" stopColor="var(--neutral-300)" />
+              <stop offset="0.43594" stopColor="white" stopOpacity="0" />
+            </radialGradient>
+          </defs>
+        </svg>
+      </div>
+    );
+  },
+);
+
+BackgroundBeams.displayName = 'BackgroundBeams';

package/primitives/badge.tsx

@@ -0,0 +1,45 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import React from 'react';
+
+import { cn } from '../src/utils';
+
+const 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',
+    },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {
+  ref?: React.RefObject<HTMLDivElement | null>;
+}
+
+const Badge = ({ className, variant, ...props }: BadgeProps) => {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+};
+
+Badge.displayName = 'Badge';
+
+export { Badge, badgeVariants };
+export default Badge;