@trackany-device/components 1.0.0

package/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,224 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+import { Check, ChevronRight, Circle } from 'lucide-react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+
+function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
+}
+
+function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return <DropdownMenuPrimitive.Trigger className="select-none" data-slot="dropdown-menu-trigger" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      className={cn(
+        'flex cursor-default gap-2 select-none items-center rounded-md px-2 py-1.5 text-sm outline-hidden',
+        'focus:bg-accent focus:text-foreground',
+        'data-[state=open]:bg-accent data-[state=open]:text-foreground',
+        'data-[here=true]:bg-accent data-[here=true]:text-foreground',
+        '[&>svg]:pointer-events-none [&_svg:not([role=img]):not([class*=text-])]:opacity-60 [&>svg]:size-4 [&>svg]:shrink-0',
+        inset && 'ps-8',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRight data-slot="dropdown-menu-sub-trigger-indicator" className="ms-auto size-3.5! rtl:rotate-180" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        'space-y-0.5 z-50 min-w-[8rem] overflow-hidden shadow-md shadow-black/5 rounded-md border border-border bg-popover text-popover-foreground p-2 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          'space-y-0.5 z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-2 text-popover-foreground shadow-md shadow-black/5 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          className,
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: 'destructive';
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      className={cn(
+        'text-foreground relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden transition-colors data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([role=img]):not([class*=text-])]:opacity-60 [&_svg:not([class*=size-])]:size-4 [&_svg]:shrink-0',
+        'focus:bg-accent focus:text-foreground',
+        'data-[active=true]:bg-accent data-[active=true]:text-accent-foreground',
+        inset && 'ps-8',
+        variant === 'destructive' &&
+          'text-destructive hover:text-destructive focus:text-destructive hover:bg-destructive/5 focus:bg-destructive/5 data-[active=true]:bg-destructive/5',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        'relative flex cursor-default select-none items-center rounded-md py-1.5 ps-8 pe-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="absolute start-2 flex h-3.5 w-3.5 items-center text-muted-foreground justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <Check className="h-4 w-4 text-primary" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        'relative flex cursor-default select-none items-center rounded-md py-1.5 ps-6 pe-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute start-1.5 flex h-3.5 w-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <Circle className="h-1.5 w-1.5 fill-primary stroke-primary" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      className={cn('px-2 py-1.5 text-xs text-muted-foreground font-medium', inset && 'ps-8', className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
+}
+
+function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn('-mx-2 my-1.5 h-px bg-muted', className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn('ms-auto text-xs tracking-widest opacity-60', className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+};

package/src/components/ui/empty-state.tsx

@@ -0,0 +1,54 @@
+import type { LucideIcon } from 'lucide-react';
+import { Inbox } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+import { Button } from './button';
+
+type Props = {
+    icon?: LucideIcon;
+    title: string;
+    description?: string;
+    actionLabel?: string;
+    actionHref?: string;
+    className?: string;
+    children?: React.ReactNode;
+};
+
+export function EmptyState({
+    icon: Icon = Inbox,
+    title,
+    description,
+    actionLabel,
+    actionHref,
+    className,
+    children,
+}: Props) {
+    return (
+        <div
+            role="status"
+            className={cn(
+                'flex flex-col items-center justify-center rounded-lg border border-dashed bg-surface px-6 py-12 text-center',
+                className,
+            )}
+        >
+            <div className="bg-primary-subtle text-primary mb-4 flex h-12 w-12 items-center justify-center rounded-full">
+                <Icon aria-hidden="true" className="size-6" />
+            </div>
+            <h3 className="font-display text-lg font-semibold text-foreground">
+                {title}
+            </h3>
+            {description && (
+                <p className="mt-1 max-w-sm text-sm text-muted-foreground">
+                    {description}
+                </p>
+            )}
+            {children && <div className="mt-6">{children}</div>}
+            {!children && actionLabel && actionHref && (
+                <Button asChild className="mt-6">
+                    <a href={actionHref}>{actionLabel}</a>
+                </Button>
+            )}
+        </div>
+    );
+}

package/src/components/ui/file-upload.tsx

@@ -0,0 +1,152 @@
+'use client';
+
+/**
+ * FileUpload — drag-and-drop multi-file picker.
+ *
+ * Headless: it manages drag-state + selection internally and reports back
+ * via onChange(File[]). It does NOT upload — caller is responsible for
+ * passing the file list to an Inertia form / fetch / FormData payload.
+ *
+ *   <FileUpload accept='image/*' maxSize={2 * 1024 * 1024}
+ *               onChange={(files) => form.setData('logo', files[0])} />
+ */
+import { Upload, X } from 'lucide-react';
+import * as React from 'react';
+
+import { Button } from './button';
+import { cn } from '../../lib/utils';
+
+type Props = {
+    accept?: string;
+    multiple?: boolean;
+    /** Bytes. Files larger than this are rejected silently with an error message. */
+    maxSize?: number;
+    hint?: string;
+    label?: string;
+    name?: string;
+    onChange?: (files: File[]) => void;
+    className?: string;
+};
+
+export function FileUpload({
+    accept,
+    multiple = false,
+    maxSize,
+    hint,
+    label = 'Drop files here, or click to browse',
+    name,
+    onChange,
+    className,
+}: Props) {
+    const inputRef = React.useRef<HTMLInputElement>(null);
+    const [files, setFiles] = React.useState<File[]>([]);
+    const [dragging, setDragging] = React.useState(false);
+    const [error, setError] = React.useState<string | null>(null);
+
+    const handleFiles = React.useCallback(
+        (incoming: FileList | null) => {
+            if (!incoming) return;
+            const list = Array.from(incoming);
+
+            if (maxSize) {
+                const tooBig = list.find((f) => f.size > maxSize);
+                if (tooBig) {
+                    setError(
+                        `${tooBig.name} exceeds the ${(maxSize / (1024 * 1024)).toFixed(1)} MB limit.`,
+                    );
+                    return;
+                }
+            }
+
+            setError(null);
+            const next = multiple ? [...files, ...list] : list.slice(0, 1);
+            setFiles(next);
+            onChange?.(next);
+        },
+        [files, maxSize, multiple, onChange],
+    );
+
+    const remove = (idx: number) => {
+        const next = files.filter((_, i) => i !== idx);
+        setFiles(next);
+        onChange?.(next);
+    };
+
+    return (
+        <div className={cn('space-y-2', className)}>
+            <label
+                onDragOver={(e) => {
+                    e.preventDefault();
+                    setDragging(true);
+                }}
+                onDragLeave={() => setDragging(false)}
+                onDrop={(e) => {
+                    e.preventDefault();
+                    setDragging(false);
+                    handleFiles(e.dataTransfer.files);
+                }}
+                className={cn(
+                    'flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed bg-surface px-6 py-8 text-center transition-colors',
+                    dragging
+                        ? 'border-primary bg-primary-subtle/40'
+                        : 'border-border hover:border-primary/60',
+                )}
+            >
+                <Upload
+                    aria-hidden="true"
+                    className="mb-2 size-6 text-muted-foreground"
+                />
+                <span className="text-sm font-medium text-foreground">
+                    {label}
+                </span>
+                {hint && (
+                    <span className="mt-1 text-xs text-muted-foreground">
+                        {hint}
+                    </span>
+                )}
+                <input
+                    ref={inputRef}
+                    type="file"
+                    name={name}
+                    accept={accept}
+                    multiple={multiple}
+                    className="sr-only"
+                    onChange={(e) => handleFiles(e.target.files)}
+                />
+            </label>
+
+            {error && (
+                <p role="alert" className="text-xs text-destructive">
+                    {error}
+                </p>
+            )}
+
+            {files.length > 0 && (
+                <ul className="space-y-1">
+                    {files.map((file, idx) => (
+                        <li
+                            key={`${file.name}-${idx}`}
+                            className="flex items-center justify-between rounded-md border bg-card px-3 py-2 text-sm"
+                        >
+                            <span className="truncate font-mono text-xs text-foreground">
+                                {file.name}
+                                <span className="ml-2 text-muted-foreground">
+                                    {(file.size / 1024).toFixed(1)} KB
+                                </span>
+                            </span>
+                            <Button
+                                type="button"
+                                size="icon"
+                                variant="ghost"
+                                aria-label={`Remove ${file.name}`}
+                                onClick={() => remove(idx)}
+                            >
+                                <X aria-hidden="true" className="size-4" />
+                            </Button>
+                        </li>
+                    ))}
+                </ul>
+            )}
+        </div>
+    );
+}

package/src/components/ui/form.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { Slot } from '@radix-ui/react-slot';
+import { Controller, type ControllerProps, type FieldPath, type FieldValues, FormProvider, useFormContext } from 'react-hook-form';
+import { cn } from '../../lib/utils';
+import { Label } from '../../controls/Label';
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+    TFieldValues extends FieldValues = FieldValues,
+    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = { name: TName };
+
+const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
+
+const FormField = <
+    TFieldValues extends FieldValues = FieldValues,
+    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({ ...props }: ControllerProps<TFieldValues, TName>) => (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+        <Controller {...props} />
+    </FormFieldContext.Provider>
+);
+
+type FormItemContextValue = { id: string };
+const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
+
+const useFormField = () => {
+    const fieldContext = React.useContext(FormFieldContext);
+    const itemContext = React.useContext(FormItemContext);
+    const { getFieldState, formState } = useFormContext();
+    const fieldState = getFieldState(fieldContext.name, formState);
+    const { id } = itemContext;
+    return {
+        id,
+        name: fieldContext.name,
+        formItemId: `${id}-form-item`,
+        formDescriptionId: `${id}-form-item-description`,
+        formMessageId: `${id}-form-item-message`,
+        ...fieldState,
+    };
+};
+
+function FormItem({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+    const id = React.useId();
+    const { error } = useFormField();
+    return (
+        <FormItemContext.Provider value={{ id }}>
+            <div data-slot="form-item" className={cn('flex flex-col gap-2.5', className)} data-invalid={!!error} {...props} />
+        </FormItemContext.Provider>
+    );
+}
+
+function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+    const { formItemId } = useFormField();
+    return <Label data-slot="form-label" className={cn('font-medium text-foreground', className)} htmlFor={formItemId} {...props} />;
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+    return (
+        <Slot
+            data-slot="form-control"
+            id={formItemId}
+            aria-describedby={!error ? formDescriptionId : `${formDescriptionId} ${formMessageId}`}
+            aria-invalid={!!error}
+            {...props}
+        />
+    );
+}
+
+function FormDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+    const { formDescriptionId, error } = useFormField();
+    if (error) return null;
+    return <div data-slot="form-description" id={formDescriptionId} className={cn('text-xs text-muted-foreground -mt-0.5', className)} {...props} />;
+}
+
+function FormMessage({ className, children, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+    const { error, formMessageId } = useFormField();
+    const body = error ? String(error?.message) : children;
+    if (!body) return null;
+    return <div data-slot="form-message" id={formMessageId} className={cn('-mt-0.5 text-xs font-normal text-destructive', className)} {...props}>{body}</div>;
+}
+
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };

package/src/components/ui/icon.tsx

@@ -0,0 +1,14 @@
+import type { LucideIcon } from 'lucide-react';
+
+interface IconProps {
+    iconNode?: LucideIcon | null;
+    className?: string;
+}
+
+export function Icon({ iconNode: IconComponent, className }: IconProps) {
+    if (!IconComponent) {
+        return null;
+    }
+
+    return <IconComponent className={className} />;
+}

package/src/components/ui/input-otp.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { OTPInput, OTPInputContext } from "input-otp"
+import { Minus } from "lucide-react"
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+const InputOTP = React.forwardRef<
+  React.ElementRef<typeof OTPInput>,
+  React.ComponentPropsWithoutRef<typeof OTPInput>
+>(({ className, containerClassName, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn(
+      "flex items-center gap-2 has-[:disabled]:opacity-50",
+      containerClassName
+    )}
+    className={cn("disabled:cursor-not-allowed", className)}
+    {...props}
+  />
+))
+InputOTP.displayName = "InputOTP"
+
+const InputOTPGroup = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center", className)} {...props} />
+))
+InputOTPGroup.displayName = "InputOTPGroup"
+
+const InputOTPSlot = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div"> & { index: number }
+>(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        isActive && "z-10 ring-1 ring-ring",
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  )
+})
+InputOTPSlot.displayName = "InputOTPSlot"
+
+const InputOTPSeparator = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ ...props }, ref) => (
+  <div ref={ref} role="separator" {...props}>
+    <Minus />
+  </div>
+))
+InputOTPSeparator.displayName = "InputOTPSeparator"
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }