@trackany-device/components 1.0.0

package/src/components/ui/command.tsx

@@ -0,0 +1,138 @@
+'use client';
+
+import React from 'react';
+import { cn } from '../../lib/utils';
+import { Dialog, DialogContent, DialogTitle } from './dialog';
+import { type DialogProps } from '@radix-ui/react-dialog';
+import { Command as CommandPrimitive } from 'cmdk';
+import { Check, LucideIcon, Search } from 'lucide-react';
+
+function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      className={cn(
+        'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+type CommandDialogProps = DialogProps & { className?: string };
+
+const CommandDialog = ({ children, className, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className={cn('overflow-hidden p-0 shadow-lg', className)}>
+        <DialogTitle className="hidden" />
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div className="flex items-center border-border border-b px-3" cmdk-input-wrapper="" data-slot="command-input">
+      <Search className="me-2 h-4 w-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        className={cn(
+          'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-hidden text-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
+      {...props}
+    />
+  );
+}
+
+function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return <CommandPrimitive.Empty data-slot="command-empty" className="py-6 text-center text-sm" {...props} />;
+}
+
+function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        'overflow-hidden p-1.5 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn('-mx-1.5 h-px bg-border', className)}
+      {...props}
+    />
+  );
+}
+
+function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        'relative flex text-foreground cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn('ms-auto text-xs tracking-widest text-muted-foreground', className)}
+      {...props}
+    />
+  );
+};
+
+interface ButtonArrowProps extends React.SVGProps<SVGSVGElement> {
+  icon?: LucideIcon; // Allows passing any Lucide icon
+}
+
+function CommandCheck({ icon: Icon = Check, className, ...props }: ButtonArrowProps) {
+  return (
+    <Icon
+      data-slot="command-check"
+      data-check="true"
+      className={cn('size-4 ms-auto text-primary', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Command,
+  CommandCheck,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+};

package/src/components/ui/cookie-banner.tsx

@@ -0,0 +1,220 @@
+'use client';
+import { PlatformLink } from '../../platform/context';
+
+/**
+ * CookieBanner — first-visit consent prompt.
+ *
+ * Shows once until a choice is recorded in localStorage under
+ * `cookie-consent`. The recorded value is a JSON object:
+ *
+ *   { essential: true, analytics: bool, marketing: bool, decidedAt: ISO }
+ *
+ * Essential cookies (session, CSRF, theme prefs) are always on — we do
+ * not collect any analytics or marketing data today, but the choice is
+ * captured so a future opt-in is honoured.
+ *
+ * COMPLIANCE: Whenever this banner changes wording, the cookie categories,
+ * or the default values, ship a new PolicyVersionSeeder_{date}.php that
+ * bumps the cookie policy version. See PolicyVersion.php for the rule.
+ *
+ * NOTE: This component imports from @inertiajs/react which must be
+ * available in the consuming app.
+ */
+import { Cookie } from 'lucide-react';
+import * as React from 'react';
+
+import { Button } from './button';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from './dialog';
+import { Toggle } from './toggle';
+
+const STORAGE_KEY = 'cookie-consent';
+
+type Consent = {
+    essential: true;
+    analytics: boolean;
+    marketing: boolean;
+    decidedAt: string;
+};
+
+function readStored(): Consent | null {
+    if (typeof window === 'undefined') return null;
+    try {
+        const raw = window.localStorage.getItem(STORAGE_KEY);
+        if (!raw) return null;
+        const parsed = JSON.parse(raw) as Consent;
+        return parsed.essential === true && parsed.decidedAt ? parsed : null;
+    } catch {
+        return null;
+    }
+}
+
+function write(consent: Consent) {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(consent));
+    window.dispatchEvent(
+        new CustomEvent('cookie-consent:changed', { detail: consent }),
+    );
+}
+
+export function CookieBanner() {
+    const [decided, setDecided] = React.useState(true);
+    const [managing, setManaging] = React.useState(false);
+    const [analytics, setAnalytics] = React.useState(false);
+    const [marketing, setMarketing] = React.useState(false);
+
+    React.useEffect(() => {
+        const stored = readStored();
+        if (!stored) {
+            setDecided(false);
+        }
+    }, []);
+
+    if (decided) return null;
+
+    const persist = (next: { analytics: boolean; marketing: boolean }) => {
+        write({
+            essential: true,
+            analytics: next.analytics,
+            marketing: next.marketing,
+            decidedAt: new Date().toISOString(),
+        });
+        setDecided(true);
+    };
+
+    const acceptAll = () => persist({ analytics: true, marketing: true });
+    const rejectAll = () => persist({ analytics: false, marketing: false });
+    const saveCustom = () => {
+        persist({ analytics, marketing });
+        setManaging(false);
+    };
+
+    return (
+        <>
+            <div
+                role="dialog"
+                aria-label="Cookie preferences"
+                className="fixed inset-x-4 bottom-4 z-50 mx-auto max-w-3xl rounded-xl border bg-surface-raised p-5 shadow-lg sm:p-6"
+            >
+                <div className="flex flex-col gap-4 sm:flex-row sm:items-start">
+                    <div className="bg-primary-subtle text-primary flex h-10 w-10 shrink-0 items-center justify-center rounded-lg">
+                        <Cookie aria-hidden="true" className="size-5" />
+                    </div>
+                    <div className="flex-1">
+                        <h2 className="font-display text-sm font-semibold text-foreground">
+                            We use cookies to make this platform work
+                        </h2>
+                        <p className="mt-1 text-sm text-muted-foreground">
+                            Essential cookies keep you logged in and protect
+                            against CSRF. With your consent, we may add
+                            analytics later. See our{' '}
+                            <PlatformLink
+                                href="/cookies"
+                                target="_blank"
+                                className="text-primary underline-offset-2 hover:underline"
+                            >
+                                Cookie Policy
+                            </PlatformLink>{' '}
+                            for details.
+                        </p>
+                        <div className="mt-4 flex flex-wrap items-center gap-2">
+                            <Button size="sm" onClick={acceptAll}>
+                                Accept all
+                            </Button>
+                            <Button
+                                size="sm"
+                                variant="outline"
+                                onClick={rejectAll}
+                            >
+                                Reject non-essential
+                            </Button>
+                            <Button
+                                size="sm"
+                                variant="ghost"
+                                onClick={() => setManaging(true)}
+                            >
+                                Manage preferences
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <Dialog open={managing} onOpenChange={setManaging}>
+                <DialogContent className="sm:max-w-md">
+                    <DialogHeader>
+                        <DialogTitle>Cookie preferences</DialogTitle>
+                        <DialogDescription>
+                            Choose which non-essential cookies to allow. You
+                            can change these later at any time.
+                        </DialogDescription>
+                    </DialogHeader>
+                    <ul className="space-y-3 py-2">
+                        <li className="flex items-start justify-between gap-3 rounded-lg border p-3">
+                            <div>
+                                <p className="text-sm font-medium text-foreground">
+                                    Essential
+                                </p>
+                                <p className="text-xs text-muted-foreground">
+                                    Session, CSRF, theme preferences. Always
+                                    on.
+                                </p>
+                            </div>
+                            <Toggle pressed disabled aria-label="Essential cookies are always on">
+                                On
+                            </Toggle>
+                        </li>
+                        <li className="flex items-start justify-between gap-3 rounded-lg border p-3">
+                            <div>
+                                <p className="text-sm font-medium text-foreground">
+                                    Analytics
+                                </p>
+                                <p className="text-xs text-muted-foreground">
+                                    Helps us understand usage patterns. No
+                                    personal data is shared with third
+                                    parties.
+                                </p>
+                            </div>
+                            <Toggle
+                                pressed={analytics}
+                                onPressedChange={setAnalytics}
+                                aria-label="Toggle analytics cookies"
+                            >
+                                {analytics ? 'On' : 'Off'}
+                            </Toggle>
+                        </li>
+                        <li className="flex items-start justify-between gap-3 rounded-lg border p-3">
+                            <div>
+                                <p className="text-sm font-medium text-foreground">
+                                    Marketing
+                                </p>
+                                <p className="text-xs text-muted-foreground">
+                                    Currently unused. Reserved for future
+                                    feature announcements.
+                                </p>
+                            </div>
+                            <Toggle
+                                pressed={marketing}
+                                onPressedChange={setMarketing}
+                                aria-label="Toggle marketing cookies"
+                            >
+                                {marketing ? 'On' : 'Off'}
+                            </Toggle>
+                        </li>
+                    </ul>
+                    <DialogFooter>
+                        <Button variant="ghost" onClick={() => setManaging(false)}>
+                            Cancel
+                        </Button>
+                        <Button onClick={saveCustom}>Save preferences</Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+        </>
+    );
+}

package/src/components/ui/copy-button.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+/**
+ * CopyButton — one-tap clipboard copy with visual ack.
+ *
+ *   <CopyButton value='P901-00042' />
+ *
+ * Shows a check icon for 1.5s after copying. Falls back gracefully when
+ * navigator.clipboard isn't available (older browsers / insecure context).
+ */
+import { Check, Copy } from 'lucide-react';
+import * as React from 'react';
+
+import { Button } from './button';
+import { cn } from '../../lib/utils';
+
+type Props = React.ComponentProps<typeof Button> & {
+    value: string;
+    label?: string;
+};
+
+export function CopyButton({
+    value,
+    label = 'Copy',
+    className,
+    variant = 'ghost',
+    size = 'icon',
+    ...rest
+}: Props) {
+    const [copied, setCopied] = React.useState(false);
+
+    const copy = React.useCallback(async () => {
+        try {
+            await navigator.clipboard.writeText(value);
+            setCopied(true);
+            window.setTimeout(() => setCopied(false), 1500);
+        } catch {
+            // Insecure context / no permission — silently fail; consumer
+            // can offer a manual fallback if needed.
+        }
+    }, [value]);
+
+    return (
+        <Button
+            type="button"
+            variant={variant}
+            size={size}
+            aria-label={copied ? 'Copied' : label}
+            className={cn(className)}
+            onClick={copy}
+            {...rest}
+        >
+            {copied ? (
+                <Check aria-hidden="true" className="text-success" />
+            ) : (
+                <Copy aria-hidden="true" />
+            )}
+        </Button>
+    );
+}

package/src/components/ui/data-grid-column-filter.tsx

@@ -0,0 +1,124 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+import { Badge } from './badge';
+import { Button } from '../../controls/Button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from './command';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
+import { Separator } from './separator';
+import { Column } from '@tanstack/react-table';
+import { Check, CirclePlus } from 'lucide-react';
+
+interface DataGridColumnFilterProps<TData, TValue> {
+  column?: Column<TData, TValue>;
+  title?: string;
+  options: {
+    label: string;
+    value: string;
+    icon?: React.ComponentType<{ className?: string }>;
+  }[];
+}
+
+function DataGridColumnFilter<TData, TValue>({ column, title, options }: DataGridColumnFilterProps<TData, TValue>) {
+  const facets = column?.getFacetedUniqueValues();
+  const selectedValues = new Set(column?.getFilterValue() as string[]);
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline" size="sm">
+          <CirclePlus className="size-4" />
+          {title}
+          {selectedValues?.size > 0 && (
+            <>
+              <Separator orientation="vertical" className="mx-2 h-4" />
+              <Badge variant="secondary" className="rounded-sm px-1 font-normal lg:hidden">
+                {selectedValues.size}
+              </Badge>
+              <div className="hidden space-x-1 lg:flex">
+                {selectedValues.size > 2 ? (
+                  <Badge variant="secondary" className="rounded-sm px-1 font-normal">
+                    {selectedValues.size} selected
+                  </Badge>
+                ) : (
+                  options
+                    .filter((option) => selectedValues.has(option.value))
+                    .map((option) => (
+                      <Badge variant="secondary" key={option.value} className="rounded-sm px-1 font-normal">
+                        {option.label}
+                      </Badge>
+                    ))
+                )}
+              </div>
+            </>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0" align="start">
+        <Command>
+          <CommandInput placeholder={title} />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => {
+                const isSelected = selectedValues.has(option.value);
+                return (
+                  <CommandItem
+                    key={option.value}
+                    onSelect={() => {
+                      if (isSelected) {
+                        selectedValues.delete(option.value);
+                      } else {
+                        selectedValues.add(option.value);
+                      }
+                      const filterValues = Array.from(selectedValues);
+                      column?.setFilterValue(filterValues.length ? filterValues : undefined);
+                    }}
+                  >
+                    <div
+                      className={cn(
+                        'me-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
+                        isSelected ? 'bg-primary text-primary-foreground' : 'opacity-50 [&_svg]:invisible',
+                      )}
+                    >
+                      <Check className={cn('h-4 w-4')} />
+                    </div>
+                    {option.icon && <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />}
+                    <span>{option.label}</span>
+                    {facets?.get(option.value) && (
+                      <span className="ms-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
+                        {facets.get(option.value)}
+                      </span>
+                    )}
+                  </CommandItem>
+                );
+              })}
+            </CommandGroup>
+            {selectedValues.size > 0 && (
+              <>
+                <CommandSeparator />
+                <CommandGroup>
+                  <CommandItem
+                    onSelect={() => column?.setFilterValue(undefined)}
+                    className="justify-center text-center"
+                  >
+                    Clear filters
+                  </CommandItem>
+                </CommandGroup>
+              </>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export { DataGridColumnFilter, type DataGridColumnFilterProps };