@trackany-device/components 1.0.0

package/src/components/ui/avatar-group.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+import * as React from 'react';
+import { AnimatePresence, motion, useMotionValue, useSpring, useTransform } from 'motion/react';
+import { cn } from '../../lib/utils';
+
+interface AvatarGroupContextValue {
+    tooltipClassName?: string;
+    animation?: 'default' | 'flip' | 'reveal';
+}
+
+const AvatarGroupContext = React.createContext<AvatarGroupContextValue | null>(null);
+
+export function AvatarGroup({
+    children,
+    className,
+    tooltipClassName,
+    animation = 'default',
+}: {
+    children: React.ReactNode;
+    className?: string;
+    tooltipClassName?: string;
+    animation?: 'default' | 'flip' | 'reveal';
+}) {
+    return (
+        <AvatarGroupContext.Provider value={{ tooltipClassName, animation }}>
+            <div className={cn('flex -space-x-2.5', className)}>{children}</div>
+        </AvatarGroupContext.Provider>
+    );
+}
+
+export function AvatarGroupItem({
+    children,
+    className,
+    tooltipClassName,
+    animation: itemAnimation,
+}: {
+    children: React.ReactNode;
+    className?: string;
+    tooltipClassName?: string;
+    animation?: 'default' | 'flip' | 'reveal';
+}) {
+    const context = React.useContext(AvatarGroupContext);
+    const [hovered, setHovered] = React.useState(false);
+    const springConfig = { stiffness: 100, damping: 5 };
+    const x = useMotionValue(0);
+    const rotate = useSpring(useTransform(x, [-100, 100], [-45, 45]), springConfig);
+    const translateX = useSpring(useTransform(x, [-100, 100], [-50, 50]), springConfig);
+
+    const animation = itemAnimation ?? context?.animation ?? 'default';
+    const finalTooltipClassName = tooltipClassName ?? context?.tooltipClassName;
+
+    const tooltipChild = React.Children.toArray(children).find(
+        (child) => React.isValidElement(child) && child.type === AvatarGroupTooltip,
+    );
+    const otherChildren = React.Children.toArray(children).filter(
+        (child) => !(React.isValidElement(child) && child.type === AvatarGroupTooltip),
+    );
+    const tooltipContent = tooltipChild && React.isValidElement(tooltipChild)
+        ? (tooltipChild.props as { children: React.ReactNode }).children
+        : null;
+
+    const variants = {
+        default: {
+            initial: { opacity: 0, y: 20, scale: 0.6 },
+            animate: { opacity: 1, y: 0, scale: 1, transition: { type: 'spring' as const, stiffness: 260, damping: 10 } },
+            exit: { opacity: 0, y: 20, scale: 0.6, transition: { duration: 0.2, ease: 'easeInOut' as const } },
+        },
+        flip: {
+            initial: { opacity: 0, rotateX: -90 },
+            animate: { opacity: 1, rotateX: 0, transition: { type: 'spring' as const, stiffness: 180, damping: 25 } },
+            exit: { opacity: 0, rotateX: -90, transition: { duration: 0.3, ease: 'easeInOut' as const } },
+        },
+        reveal: {
+            initial: { opacity: 0, scale: 0.95 },
+            animate: { opacity: 1, scale: 1, transition: { duration: 0.15, ease: 'easeOut' as const } },
+            exit: { opacity: 0, scale: 0.95, transition: { duration: 0.1, ease: 'easeIn' as const } },
+        },
+    };
+    const v = variants[animation];
+
+    return (
+        <div
+            className={cn('group relative', className)}
+            onMouseEnter={() => setHovered(true)}
+            onMouseLeave={() => setHovered(false)}
+        >
+            <AnimatePresence mode="wait">
+                {hovered && tooltipContent && (
+                    <motion.div
+                        initial={v.initial}
+                        animate={v.animate}
+                        exit={v.exit}
+                        style={{
+                            translateX: animation === 'reveal' ? 0 : translateX,
+                            rotate: animation === 'reveal' ? 0 : rotate,
+                            whiteSpace: 'nowrap',
+                            transformOrigin: 'center',
+                        }}
+                        className={cn(
+                            'absolute -top-16 left-1/2 z-50 flex -translate-x-1/2 flex-col items-center justify-center rounded-md bg-black px-4 py-2 text-xs font-medium text-white shadow-xl',
+                            finalTooltipClassName,
+                        )}
+                    >
+                        {tooltipContent}
+                    </motion.div>
+                )}
+            </AnimatePresence>
+            <motion.div
+                className="relative cursor-pointer"
+                whileHover={{ zIndex: 30 }}
+                whileTap={{ scale: 0.95 }}
+                transition={{ duration: 0.5 }}
+                onMouseMove={(e) => {
+                    const half = (e.currentTarget as HTMLElement).offsetWidth / 2;
+                    x.set(e.nativeEvent.offsetX - half);
+                }}
+            >
+                {otherChildren}
+            </motion.div>
+        </div>
+    );
+}
+
+export function AvatarGroupTooltip({ children, className }: { children: React.ReactNode; className?: string }) {
+    return (
+        <div className={cn('hidden relative z-30', className)}>{children}</div>
+    );
+}

package/src/components/ui/avatar.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+import { cva, VariantProps } from 'class-variance-authority';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+
+const avatarStatusVariants = cva('flex items-center rounded-full size-2 border-2 border-background', {
+  variants: {
+    variant: {
+      online: 'bg-green-600',
+      offline: 'bg-zinc-600 dark:bg-zinc-300',
+      busy: 'bg-yellow-600',
+      away: 'bg-blue-600',
+    },
+  },
+  defaultVariants: {
+    variant: 'online',
+  },
+});
+
+function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root data-slot="avatar" className={cn('relative flex shrink-0 size-10', className)} {...props} />
+  );
+}
+
+function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <div className={cn('relative overflow-hidden rounded-full', className)}>
+      <AvatarPrimitive.Image data-slot="avatar-image" className={cn('aspect-square h-full w-full')} {...props} />
+    </div>
+  );
+}
+
+function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        'flex h-full w-full items-center justify-center rounded-full border border-border bg-accent text-accent-foreground text-xs',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarIndicator({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="avatar-indicator"
+      className={cn('absolute flex size-6 items-center justify-center', className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarStatus({
+  className,
+  variant,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof avatarStatusVariants>) {
+  return <div data-slot="avatar-status" className={cn(avatarStatusVariants({ variant }), className)} {...props} />;
+}
+
+export { Avatar, AvatarFallback, AvatarImage, AvatarIndicator, AvatarStatus, avatarStatusVariants };

package/src/components/ui/badge.tsx

@@ -0,0 +1,230 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Slot as SlotPrimitive } from '@radix-ui/react-slot';
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+  asChild?: boolean;
+  dotClassName?: string;
+  disabled?: boolean;
+}
+
+export interface BadgeButtonProps
+  extends React.ButtonHTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeButtonVariants> {
+  asChild?: boolean;
+}
+
+export type BadgeDotProps = React.HTMLAttributes<HTMLSpanElement>;
+
+const badgeVariants = cva(
+  'inline-flex items-center justify-center border border-transparent font-medium focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 [&_svg]:-ms-px [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        primary: 'bg-primary text-primary-foreground',
+        secondary: 'bg-secondary text-secondary-foreground',
+        success:
+          'bg-[var(--color-success-accent,var(--color-green-500))] text-[var(--color-success-foreground,var(--color-white))]',
+        warning:
+          'bg-[var(--color-warning-accent,var(--color-yellow-500))] text-[var(--color-warning-foreground,var(--color-white))]',
+        info: 'bg-[var(--color-info-accent,var(--color-violet-500))] text-[var(--color-info-foreground,var(--color-white))]',
+        outline: 'bg-transparent border border-border text-secondary-foreground',
+        destructive: 'bg-destructive text-destructive-foreground',
+      },
+      appearance: {
+        default: '',
+        light: '',
+        outline: '',
+        ghost: 'border-transparent bg-transparent',
+      },
+      disabled: {
+        true: 'opacity-50 pointer-events-none',
+      },
+      size: {
+        lg: 'rounded-md px-[0.5rem] h-7 min-w-7 gap-1.5 text-xs [&_svg]:size-3.5',
+        md: 'rounded-md px-[0.45rem] h-6 min-w-6 gap-1.5 text-xs [&_svg]:size-3.5 ',
+        sm: 'rounded-sm px-[0.325rem] h-5 min-w-5 gap-1 text-[0.6875rem] leading-[0.75rem] [&_svg]:size-3',
+        xs: 'rounded-sm px-[0.25rem] h-4 min-w-4 gap-1 text-[0.625rem] leading-[0.5rem] [&_svg]:size-3',
+      },
+      shape: {
+        default: '',
+        circle: 'rounded-full',
+      },
+    },
+    compoundVariants: [
+      /* Light */
+      {
+        variant: 'primary',
+        appearance: 'light',
+        className:
+          'text-[var(--color-primary-accent,var(--color-blue-700))] bg-[var(--color-primary-soft,var(--color-blue-50))] dark:bg-[var(--color-primary-soft,var(--color-blue-950))] dark:text-[var(--color-primary-soft,var(--color-blue-600))]',
+      },
+      {
+        variant: 'secondary',
+        appearance: 'light',
+        className: 'bg-secondary dark:bg-secondary/50 text-secondary-foreground',
+      },
+      {
+        variant: 'success',
+        appearance: 'light',
+        className:
+          'text-[var(--color-success-accent,var(--color-green-800))] bg-[var(--color-success-soft,var(--color-green-100))] dark:bg-[var(--color-success-soft,var(--color-green-950))] dark:text-[var(--color-success-soft,var(--color-green-600))]',
+      },
+      {
+        variant: 'warning',
+        appearance: 'light',
+        className:
+          'text-[var(--color-warning-accent,var(--color-yellow-700))] bg-[var(--color-warning-soft,var(--color-yellow-100))] dark:bg-[var(--color-warning-soft,var(--color-yellow-950))] dark:text-[var(--color-warning-soft,var(--color-yellow-600))]',
+      },
+      {
+        variant: 'info',
+        appearance: 'light',
+        className:
+          'text-[var(--color-info-accent,var(--color-violet-700))] bg-[var(--color-info-soft,var(--color-violet-100))] dark:bg-[var(--color-info-soft,var(--color-violet-950))] dark:text-[var(--color-info-soft,var(--color-violet-400))]',
+      },
+      {
+        variant: 'destructive',
+        appearance: 'light',
+        className:
+          'text-[var(--color-destructive-accent,var(--color-red-700))] bg-[var(--color-destructive-soft,var(--color-red-50))] dark:bg-[var(--color-destructive-soft,var(--color-red-950))] dark:text-[var(--color-destructive-soft,var(--color-red-600))]',
+      },
+      /* Outline */
+      {
+        variant: 'primary',
+        appearance: 'outline',
+        className:
+          'text-[var(--color-primary-accent,var(--color-blue-700))] border-[var(--color-primary-soft,var(--color-blue-100))] bg-[var(--color-primary-soft,var(--color-blue-50))] dark:bg-[var(--color-primary-soft,var(--color-blue-950))] dark:border-[var(--color-primary-soft,var(--color-blue-900))] dark:text-[var(--color-primary-soft,var(--color-blue-600))]',
+      },
+      {
+        variant: 'success',
+        appearance: 'outline',
+        className:
+          'text-[var(--color-success-accent,var(--color-green-700))] border-[var(--color-success-soft,var(--color-green-200))] bg-[var(--color-success-soft,var(--color-green-50))] dark:bg-[var(--color-success-soft,var(--color-green-950))] dark:border-[var(--color-success-soft,var(--color-green-900))] dark:text-[var(--color-success-soft,var(--color-green-600))]',
+      },
+      {
+        variant: 'warning',
+        appearance: 'outline',
+        className:
+          'text-[var(--color-warning-accent,var(--color-yellow-700))] border-[var(--color-warning-soft,var(--color-yellow-200))] bg-[var(--color-warning-soft,var(--color-yellow-50))] dark:bg-[var(--color-warning-soft,var(--color-yellow-950))] dark:border-[var(--color-warning-soft,var(--color-yellow-900))] dark:text-[var(--color-warning-soft,var(--color-yellow-600))]',
+      },
+      {
+        variant: 'info',
+        appearance: 'outline',
+        className:
+          'text-[var(--color-info-accent,var(--color-violet-700))] border-[var(--color-info-soft,var(--color-violet-100))] bg-[var(--color-info-soft,var(--color-violet-50))] dark:bg-[var(--color-info-soft,var(--color-violet-950))] dark:border-[var(--color-info-soft,var(--color-violet-900))] dark:text-[var(--color-info-soft,var(--color-violet-400))]',
+      },
+      {
+        variant: 'destructive',
+        appearance: 'outline',
+        className:
+          'text-[var(--color-destructive-accent,var(--color-red-700))] border-[var(--color-destructive-soft,var(--color-red-100))] bg-[var(--color-destructive-soft,var(--color-red-50))] dark:bg-[var(--color-destructive-soft,var(--color-red-950))] dark:border-[var(--color-destructive-soft,var(--color-red-900))] dark:text-[var(--color-destructive-soft,var(--color-red-600))]',
+      },
+      /* Ghost */
+      {
+        variant: 'primary',
+        appearance: 'ghost',
+        className: 'text-primary',
+      },
+      {
+        variant: 'secondary',
+        appearance: 'ghost',
+        className: 'text-secondary-foreground',
+      },
+      {
+        variant: 'success',
+        appearance: 'ghost',
+        className: 'text-[var(--color-success-accent,var(--color-green-500))]',
+      },
+      {
+        variant: 'warning',
+        appearance: 'ghost',
+        className: 'text-[var(--color-warning-accent,var(--color-yellow-500))]',
+      },
+      {
+        variant: 'info',
+        appearance: 'ghost',
+        className: 'text-[var(--color-info-accent,var(--color-violet-500))]',
+      },
+      {
+        variant: 'destructive',
+        appearance: 'ghost',
+        className: 'text-destructive',
+      },
+
+      { size: 'lg', appearance: 'ghost', className: 'px-0' },
+      { size: 'md', appearance: 'ghost', className: 'px-0' },
+      { size: 'sm', appearance: 'ghost', className: 'px-0' },
+      { size: 'xs', appearance: 'ghost', className: 'px-0' },
+    ],
+    defaultVariants: {
+      variant: 'primary',
+      appearance: 'default',
+      size: 'md',
+    },
+  },
+);
+
+const badgeButtonVariants = cva(
+  'cursor-pointer transition-all inline-flex items-center justify-center leading-none size-3.5 [&>svg]:opacity-100! [&>svg]:size-3.5! p-0 rounded-md -me-0.5 opacity-60 hover:opacity-100',
+  {
+    variants: {
+      variant: {
+        default: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant,
+  size,
+  appearance,
+  shape,
+  asChild = false,
+  disabled,
+  ...props
+}: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? SlotPrimitive : 'span';
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant, size, appearance, shape, disabled }), className)}
+      {...props}
+    />
+  );
+}
+
+function BadgeButton({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> & VariantProps<typeof badgeButtonVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? SlotPrimitive : 'span';
+  return (
+    <Comp
+      data-slot="badge-button"
+      className={cn(badgeButtonVariants({ variant, className }))}
+      role="button"
+      {...props}
+    />
+  );
+}
+
+function BadgeDot({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="badge-dot"
+      className={cn('size-1.5 rounded-full bg-[currentColor] opacity-75', className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, BadgeButton, BadgeDot, badgeVariants };

package/src/components/ui/breadcrumb.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+import { ChevronRight, MoreHorizontal } from 'lucide-react';
+import { Slot as SlotPrimitive } from '@radix-ui/react-slot';
+
+function Breadcrumb({
+  ...props
+}: React.ComponentProps<'nav'> & {
+  separator?: React.ReactNode;
+}) {
+  return <nav data-slot="breadcrumb" aria-label="breadcrumb" {...props} />;
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
+  return <li data-slot="breadcrumb-item" className={cn('inline-flex items-center gap-1.5', className)} {...props} />;
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<'a'> & {
+  asChild?: boolean;
+}) {
+  const Comp = asChild ? SlotPrimitive : 'a';
+
+  return (
+    <Comp data-slot="breadcrumb-link" className={cn('transition-colors hover:text-foreground', className)} {...props} />
+  );
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn('font-normal text-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<'li'>) => (
+  <li
+    data-slot="breadcrumb-separator"
+    role="presentation"
+    aria-hidden="true"
+    className={cn('[&>svg]:w-3.5 [&>svg]:h-3.5', className)}
+    {...props}
+  >
+    {children ?? <ChevronRight className="rtl:rotate-180" />}
+  </li>
+);
+
+const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<'span'>) => (
+  <span
+    data-slot="breadcrumb-ellipsis"
+    role="presentation"
+    aria-hidden="true"
+    className={cn('flex h-9 w-9 items-center justify-center', className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+);
+
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+};