@trackany-device/components 1.0.0

package/src/controls/Button.tsx

@@ -0,0 +1,101 @@
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '../lib/utils';
+
+const buttonVariants = cva(
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+    {
+        variants: {
+            variant: {
+                default:
+                    'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+                // Alias: 'primary' maps to the default shadcn look
+                primary:
+                    'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+                destructive:
+                    'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
+                outline:
+                    'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground',
+                secondary:
+                    'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+                ghost: 'hover:bg-accent hover:text-accent-foreground',
+                link: 'text-primary underline-offset-4 hover:underline',
+            },
+            size: {
+                default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+                // Legacy aliases used by existing auth forms
+                sm: 'h-8 rounded-md px-3 has-[>svg]:px-2.5',
+                md: 'h-9 px-4 py-2 has-[>svg]:px-3',
+                lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+                icon: 'size-9',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+            size: 'default',
+        },
+    },
+);
+
+interface ButtonProps
+    extends React.ComponentProps<'button'>,
+        VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+    loading?: boolean;
+    fullWidth?: boolean;
+}
+
+function Button({
+    className,
+    variant,
+    size,
+    asChild = false,
+    loading = false,
+    fullWidth = false,
+    disabled,
+    children,
+    ...props
+}: ButtonProps) {
+    const Comp = asChild ? Slot : 'button';
+
+    return (
+        <Comp
+            data-slot="button"
+            disabled={disabled || loading}
+            className={cn(
+                buttonVariants({ variant, size }),
+                fullWidth && 'w-full',
+                className,
+            )}
+            {...props}
+        >
+            {loading && (
+                <svg
+                    className="size-4 animate-spin shrink-0"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    aria-hidden="true"
+                >
+                    <circle
+                        className="opacity-25"
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke="currentColor"
+                        strokeWidth="4"
+                    />
+                    <path
+                        className="opacity-75"
+                        fill="currentColor"
+                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                    />
+                </svg>
+            )}
+            {children}
+        </Comp>
+    );
+}
+
+export { Button, buttonVariants };

package/src/controls/Checkbox.tsx

@@ -0,0 +1,29 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+
+interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    label?: ReactNode;
+    error?: string;
+}
+
+export function Checkbox({ label, error, className = '', id, ...props }: Props) {
+    return (
+        <div>
+            <label
+                htmlFor={id}
+                className="flex items-center gap-2.5 cursor-pointer select-none"
+            >
+                <input
+                    id={id}
+                    type="checkbox"
+                    className={`h-4 w-4 rounded border-border text-primary focus:ring-2 focus:ring-ring focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
+                    aria-invalid={!!error}
+                    {...props}
+                />
+                {label && (
+                    <span className="text-sm text-foreground">{label}</span>
+                )}
+            </label>
+            {error && <p className="mt-1 text-xs text-destructive">{error}</p>}
+        </div>
+    );
+}

package/src/controls/DateField.tsx

@@ -0,0 +1,37 @@
+import { DateField as DateFieldPrimitive, DateInput, DateSegment } from '../components/ui/datefield';
+import { Label } from './Label';
+import { cn } from '../lib/utils';
+import type { DateValue } from 'react-aria-components';
+import type { DateFieldProps } from 'react-aria-components';
+
+interface DateFieldControlProps<T extends DateValue> extends DateFieldProps<T> {
+    label?: string;
+    error?: string;
+    className?: string;
+    inputClassName?: string;
+}
+
+export function DateField<T extends DateValue>({
+    label,
+    error,
+    className,
+    inputClassName,
+    id,
+    ...props
+}: DateFieldControlProps<T>) {
+    return (
+        <div className={cn('flex flex-col gap-2', className)}>
+            {label && <Label htmlFor={id}>{label}</Label>}
+            <DateFieldPrimitive {...props}>
+                <DateInput className={cn(
+                    'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-colors',
+                    'placeholder:text-muted-foreground focus-within:outline-none focus-within:ring-1 focus-within:ring-ring',
+                    'disabled:cursor-not-allowed disabled:opacity-50',
+                    error && 'border-destructive focus-within:ring-destructive',
+                    inputClassName,
+                )} />
+            </DateFieldPrimitive>
+            {error && <p className="text-xs text-destructive">{error}</p>}
+        </div>
+    );
+}

package/src/controls/FormField.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+import { Label } from './Label';
+
+interface Props {
+    label: string;
+    htmlFor?: string;
+    hint?: string;
+    required?: boolean;
+    children: ReactNode;
+}
+
+export function FormField({ label, htmlFor, hint, required, children }: Props) {
+    return (
+        <div>
+            <Label htmlFor={htmlFor} required={required}>{label}</Label>
+            {children}
+            {hint && <p className="mt-1 text-xs text-muted-foreground">{hint}</p>}
+        </div>
+    );
+}

package/src/controls/Heading.tsx

@@ -0,0 +1,28 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+type Level = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+const sizes: Record<Level, string> = {
+    h1: 'text-4xl font-bold tracking-tight',
+    h2: 'text-3xl font-bold tracking-tight',
+    h3: 'text-2xl font-semibold tracking-tight',
+    h4: 'text-xl font-semibold',
+    h5: 'text-lg font-semibold',
+    h6: 'text-base font-semibold',
+};
+
+interface Props extends HTMLAttributes<HTMLHeadingElement> {
+    as?: Level;
+    children: ReactNode;
+}
+
+export function Heading({ as: Tag = 'h2', className = '', children, ...props }: Props) {
+    return (
+        <Tag
+            className={`text-foreground ${sizes[Tag]} ${className}`}
+            {...props}
+        >
+            {children}
+        </Tag>
+    );
+}

package/src/controls/Input.tsx

@@ -0,0 +1,21 @@
+import type { InputHTMLAttributes } from 'react';
+
+interface Props extends InputHTMLAttributes<HTMLInputElement> {
+    error?: string;
+}
+
+const base =
+    'w-full rounded-lg border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 transition-colors';
+
+export function Input({ error, className = '', ...props }: Props) {
+    return (
+        <>
+            <input
+                className={`${base} ${error ? 'border-destructive' : 'border-border'} ${className}`}
+                aria-invalid={!!error}
+                {...props}
+            />
+            {error && <p className="mt-1 text-xs text-destructive">{error}</p>}
+        </>
+    );
+}

package/src/controls/Label.tsx

@@ -0,0 +1,18 @@
+import type { LabelHTMLAttributes, ReactNode } from 'react';
+
+interface Props extends LabelHTMLAttributes<HTMLLabelElement> {
+    required?: boolean;
+    children?: ReactNode;
+}
+
+export function Label({ required, children, className = '', ...props }: Props) {
+    return (
+        <label
+            className={`block text-sm font-medium text-foreground mb-1 ${className}`}
+            {...props}
+        >
+            {children}
+            {required && <span className="ml-0.5 text-destructive" aria-hidden="true">*</span>}
+        </label>
+    );
+}

package/src/controls/Paragraph.tsx

@@ -0,0 +1,39 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+const sizes = {
+    xs: 'text-xs',
+    sm: 'text-sm',
+    md: 'text-base',
+    lg: 'text-lg',
+} as const;
+
+const variants = {
+    default: 'text-foreground',
+    muted:   'text-muted-foreground',
+    lead:    'text-muted-foreground text-xl',
+    error:   'text-destructive',
+    success: 'text-green-600',
+} as const;
+
+interface Props extends HTMLAttributes<HTMLParagraphElement> {
+    size?: keyof typeof sizes;
+    variant?: keyof typeof variants;
+    children: ReactNode;
+}
+
+export function Paragraph({
+    size = 'md',
+    variant = 'default',
+    className = '',
+    children,
+    ...props
+}: Props) {
+    return (
+        <p
+            className={`leading-relaxed ${sizes[size]} ${variants[variant]} ${className}`}
+            {...props}
+        >
+            {children}
+        </p>
+    );
+}

package/src/controls/PasswordInput.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { Eye, EyeOff } from 'lucide-react';
+import { useState } from 'react';
+import type { InputHTMLAttributes } from 'react';
+
+interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    error?: string;
+}
+
+const base =
+    'w-full rounded-lg border bg-background px-3 py-2 pr-10 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 transition-colors';
+
+export function PasswordInput({ error, className = '', ...props }: Props) {
+    const [visible, setVisible] = useState(false);
+    const Icon = visible ? EyeOff : Eye;
+
+    return (
+        <>
+            <div className="relative">
+                <input
+                    type={visible ? 'text' : 'password'}
+                    className={`${base} ${error ? 'border-destructive' : 'border-border'} ${className}`}
+                    aria-invalid={!!error}
+                    {...props}
+                />
+                <button
+                    type="button"
+                    onClick={() => setVisible(v => !v)}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
+                    aria-label={visible ? 'Hide password' : 'Show password'}
+                    tabIndex={-1}
+                >
+                    <Icon className="h-4 w-4" />
+                </button>
+            </div>
+            {error && <p className="mt-1 text-xs text-destructive">{error}</p>}
+        </>
+    );
+}

package/src/controls/RadioGroup.tsx

@@ -0,0 +1,70 @@
+import type { ReactNode } from 'react';
+import { RadioGroup as RadioGroupPrimitive, RadioGroupItem } from '../components/ui/radio-group';
+import { Label } from './Label';
+import { cn } from '../lib/utils';
+
+interface RadioOption {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+
+interface RadioGroupProps {
+    name?: string;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    options: RadioOption[];
+    error?: string;
+    className?: string;
+    orientation?: 'horizontal' | 'vertical';
+    children?: ReactNode;
+}
+
+export function RadioGroup({
+    name,
+    value,
+    defaultValue,
+    onChange,
+    options,
+    error,
+    className,
+    orientation = 'vertical',
+    children,
+}: RadioGroupProps) {
+    return (
+        <div className={cn('space-y-1', className)}>
+            <RadioGroupPrimitive
+                name={name}
+                value={value}
+                defaultValue={defaultValue}
+                onValueChange={onChange}
+                className={cn(
+                    'flex gap-3',
+                    orientation === 'vertical' ? 'flex-col' : 'flex-row flex-wrap',
+                )}
+            >
+                {children ?? options.map((opt) => (
+                    <div key={opt.value} className="flex items-start gap-2">
+                        <RadioGroupItem
+                            id={`${name}-${opt.value}`}
+                            value={opt.value}
+                            disabled={opt.disabled}
+                            className="mt-0.5"
+                        />
+                        <div className="flex flex-col gap-0.5">
+                            <Label htmlFor={`${name}-${opt.value}`} className="font-normal cursor-pointer">
+                                {opt.label}
+                            </Label>
+                            {opt.description && (
+                                <span className="text-xs text-muted-foreground">{opt.description}</span>
+                            )}
+                        </div>
+                    </div>
+                ))}
+            </RadioGroupPrimitive>
+            {error && <p className="text-xs text-destructive mt-1">{error}</p>}
+        </div>
+    );
+}

package/src/controls/Select.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode, SelectHTMLAttributes } from 'react';
+
+interface Props extends SelectHTMLAttributes<HTMLSelectElement> {
+    error?: string;
+    children: ReactNode;
+}
+
+const base =
+    'w-full rounded-lg border bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 transition-colors appearance-none bg-[url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'16\' height=\'16\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'%236b7280\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'%3E%3Cpath d=\'m6 9 6 6 6-6\'/%3E%3C/svg%3E")] bg-no-repeat bg-[right_0.5rem_center] pr-9';
+
+export function Select({ error, className = '', children, ...props }: Props) {
+    return (
+        <>
+            <select
+                className={`${base} ${error ? 'border-destructive' : 'border-border'} ${className}`}
+                aria-invalid={!!error}
+                {...props}
+            >
+                {children}
+            </select>
+            {error && <p className="mt-1 text-xs text-destructive">{error}</p>}
+        </>
+    );
+}

package/src/controls/Slider.tsx

@@ -0,0 +1,33 @@
+import type { ComponentProps } from 'react';
+import { Slider as SliderPrimitive, SliderThumb } from '../components/ui/slider';
+import { Label } from './Label';
+import { cn } from '../lib/utils';
+
+interface SliderProps extends ComponentProps<typeof SliderPrimitive> {
+    label?: string;
+    showValue?: boolean;
+    error?: string;
+    className?: string;
+}
+
+export function Slider({ label, showValue, error, className, ...props }: SliderProps) {
+    const currentValue = Array.isArray(props.value) ? props.value : props.defaultValue;
+    const displayValue = Array.isArray(currentValue) ? currentValue[0] : currentValue;
+
+    return (
+        <div className={cn('space-y-2', className)}>
+            {(label || showValue) && (
+                <div className="flex items-center justify-between">
+                    {label && <Label className="font-normal">{label}</Label>}
+                    {showValue && displayValue !== undefined && (
+                        <span className="text-sm text-muted-foreground">{displayValue}</span>
+                    )}
+                </div>
+            )}
+            <SliderPrimitive {...props}>
+                <SliderThumb />
+            </SliderPrimitive>
+            {error && <p className="text-xs text-destructive">{error}</p>}
+        </div>
+    );
+}

package/src/controls/Switch.tsx

@@ -0,0 +1,31 @@
+import type { ComponentProps } from 'react';
+import { Switch as SwitchPrimitive, SwitchWrapper } from '../components/ui/switch';
+import { Label } from './Label';
+import { cn } from '../lib/utils';
+
+interface SwitchProps extends ComponentProps<typeof SwitchPrimitive> {
+    label?: string;
+    description?: string;
+    error?: string;
+    labelClassName?: string;
+}
+
+export function Switch({ label, description, error, labelClassName, className, id, ...props }: SwitchProps) {
+    const switchId = id ?? `switch-${Math.random().toString(36).slice(2, 7)}`;
+    return (
+        <SwitchWrapper className={cn('flex items-center gap-3', className)}>
+            <SwitchPrimitive id={switchId} {...props} />
+            {(label || description) && (
+                <div className="flex flex-col gap-0.5">
+                    {label && (
+                        <Label htmlFor={switchId} className={cn('font-normal cursor-pointer', labelClassName)}>
+                            {label}
+                        </Label>
+                    )}
+                    {description && <span className="text-xs text-muted-foreground">{description}</span>}
+                </div>
+            )}
+            {error && <p className="text-xs text-destructive">{error}</p>}
+        </SwitchWrapper>
+    );
+}

package/src/controls/Textarea.tsx

@@ -0,0 +1,22 @@
+import type { TextareaHTMLAttributes } from 'react';
+
+interface Props extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    error?: string;
+}
+
+const base =
+    'w-full rounded-lg border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 resize-y transition-colors';
+
+export function Textarea({ error, className = '', rows = 4, ...props }: Props) {
+    return (
+        <>
+            <textarea
+                rows={rows}
+                className={`${base} ${error ? 'border-destructive' : 'border-border'} ${className}`}
+                aria-invalid={!!error}
+                {...props}
+            />
+            {error && <p className="mt-1 text-xs text-destructive">{error}</p>}
+        </>
+    );
+}

package/src/elements/ConfirmPasswordForm.tsx

@@ -0,0 +1,43 @@
+import type { FormEvent } from 'react';
+import { Button } from '../controls/Button';
+import { FormField } from '../controls/FormField';
+import { PasswordInput } from '../controls/PasswordInput';
+
+export interface ConfirmPasswordFormErrors {
+    password?: string;
+}
+
+interface Props {
+    password: string;
+    errors: ConfirmPasswordFormErrors;
+    processing?: boolean;
+    onChange: (value: string) => void;
+    onSubmit: (e: FormEvent) => void;
+}
+
+export function ConfirmPasswordForm({ password, errors, processing = false, onChange, onSubmit }: Props) {
+    return (
+        <form onSubmit={onSubmit} className="space-y-4">
+            <p className="text-sm text-muted-foreground">
+                This is a secure area of the application. Please confirm your password before continuing.
+            </p>
+
+            <FormField label="Password" htmlFor="confirm-password">
+                <PasswordInput
+                    id="confirm-password"
+                    value={password}
+                    onChange={e => onChange(e.target.value)}
+                    placeholder="••••••••"
+                    error={errors.password}
+                    required
+                    autoFocus
+                    autoComplete="current-password"
+                />
+            </FormField>
+
+            <Button type="submit" loading={processing} fullWidth>
+                Confirm password
+            </Button>
+        </form>
+    );
+}

package/src/elements/DeviceStatusBadge.tsx

@@ -0,0 +1,38 @@
+import { cn } from '../lib/utils';
+
+export type DeviceStatus = 'online' | 'offline' | 'idle' | 'moving' | 'error' | 'unknown';
+
+const STATUS_CONFIG: Record<DeviceStatus, { label: string; dotClass: string; textClass: string; bgClass: string }> = {
+    online:  { label: 'Online',  dotClass: 'bg-success',     textClass: 'text-success',     bgClass: 'bg-success/10 border-success/20' },
+    moving:  { label: 'Moving',  dotClass: 'bg-primary',     textClass: 'text-primary',     bgClass: 'bg-primary/10 border-primary/20' },
+    idle:    { label: 'Idle',    dotClass: 'bg-yellow-500',  textClass: 'text-yellow-600',  bgClass: 'bg-yellow-50 border-yellow-200' },
+    offline: { label: 'Offline', dotClass: 'bg-muted-foreground', textClass: 'text-muted-foreground', bgClass: 'bg-muted border-border' },
+    error:   { label: 'Error',   dotClass: 'bg-destructive', textClass: 'text-destructive', bgClass: 'bg-destructive/10 border-destructive/20' },
+    unknown: { label: 'Unknown', dotClass: 'bg-muted-foreground', textClass: 'text-muted-foreground', bgClass: 'bg-muted border-border' },
+};
+
+interface DeviceStatusBadgeProps {
+    status: DeviceStatus;
+    showDot?: boolean;
+    size?: 'sm' | 'md';
+    className?: string;
+}
+
+export function DeviceStatusBadge({ status, showDot = true, size = 'md', className }: DeviceStatusBadgeProps) {
+    const conf = STATUS_CONFIG[status] ?? STATUS_CONFIG.unknown;
+    return (
+        <span className={cn(
+            'inline-flex items-center gap-1.5 rounded-full border font-medium',
+            size === 'sm' ? 'px-2 py-0.5 text-xs' : 'px-2.5 py-1 text-xs',
+            conf.bgClass, conf.textClass,
+            className,
+        )}>
+            {showDot && (
+                <span className={cn('size-1.5 rounded-full shrink-0', conf.dotClass,
+                    (status === 'online' || status === 'moving') && 'animate-pulse',
+                )} />
+            )}
+            {conf.label}
+        </span>
+    );
+}