@trackany-device/components 1.0.0

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

@@ -0,0 +1,193 @@
+'use client';
+
+import { createContext, ReactNode, useContext } from 'react';
+import { cn } from '../../lib/utils';
+import { ColumnFiltersState, RowData, SortingState, Table } from '@tanstack/react-table';
+
+declare module '@tanstack/react-table' {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface ColumnMeta<TData extends RowData, TValue> {
+    headerTitle?: string;
+    headerClassName?: string;
+    cellClassName?: string;
+    skeleton?: ReactNode;
+    expandedContent?: (row: TData) => ReactNode;
+  }
+}
+
+export type DataGridApiFetchParams = {
+  pageIndex: number;
+  pageSize: number;
+  sorting?: SortingState;
+  filters?: ColumnFiltersState;
+  searchQuery?: string;
+};
+
+export type DataGridApiResponse<T> = {
+  data: T[];
+  empty: boolean;
+  pagination: {
+    total: number;
+    page: number;
+  };
+};
+
+export interface DataGridContextProps<TData extends object> {
+  props: DataGridProps<TData>;
+  table: Table<TData>;
+  recordCount: number;
+  isLoading: boolean;
+}
+
+export type DataGridRequestParams = {
+  pageIndex: number;
+  pageSize: number;
+  sorting?: SortingState;
+  columnFilters?: ColumnFiltersState;
+};
+
+export interface DataGridProps<TData extends object> {
+  className?: string;
+  table?: Table<TData>;
+  recordCount: number;
+  children?: ReactNode;
+  onRowClick?: (row: TData) => void;
+  isLoading?: boolean;
+  loadingMode?: 'skeleton' | 'spinner';
+  loadingMessage?: ReactNode | string;
+  emptyMessage?: ReactNode | string;
+  tableLayout?: {
+    dense?: boolean;
+    cellBorder?: boolean;
+    rowBorder?: boolean;
+    rowRounded?: boolean;
+    stripped?: boolean;
+    headerBackground?: boolean;
+    headerBorder?: boolean;
+    headerSticky?: boolean;
+    width?: 'auto' | 'fixed';
+    columnsVisibility?: boolean;
+    columnsResizable?: boolean;
+    columnsPinnable?: boolean;
+    columnsMovable?: boolean;
+    columnsDraggable?: boolean;
+    rowsDraggable?: boolean;
+  };
+  tableClassNames?: {
+    base?: string;
+    header?: string;
+    headerRow?: string;
+    headerSticky?: string;
+    body?: string;
+    bodyRow?: string;
+    footer?: string;
+    edgeCell?: string;
+  };
+}
+
+const DataGridContext = createContext<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  DataGridContextProps<any> | undefined
+>(undefined);
+
+function useDataGrid() {
+  const context = useContext(DataGridContext);
+  if (!context) {
+    throw new Error('useDataGrid must be used within a DataGridProvider');
+  }
+  return context;
+}
+
+function DataGridProvider<TData extends object>({
+  children,
+  table,
+  ...props
+}: DataGridProps<TData> & { table: Table<TData> }) {
+  return (
+    <DataGridContext.Provider
+      value={{
+        props,
+        table,
+        recordCount: props.recordCount,
+        isLoading: props.isLoading || false,
+      }}
+    >
+      {children}
+    </DataGridContext.Provider>
+  );
+}
+
+function DataGrid<TData extends object>({ children, table, ...props }: DataGridProps<TData>) {
+  const defaultProps: Partial<DataGridProps<TData>> = {
+    loadingMode: 'skeleton',
+    tableLayout: {
+      dense: false,
+      cellBorder: false,
+      rowBorder: true,
+      rowRounded: false,
+      stripped: false,
+      headerSticky: false,
+      headerBackground: true,
+      headerBorder: true,
+      width: 'fixed',
+      columnsVisibility: false,
+      columnsResizable: false,
+      columnsPinnable: false,
+      columnsMovable: false,
+      columnsDraggable: false,
+      rowsDraggable: false,
+    },
+    tableClassNames: {
+      base: '',
+      header: '',
+      headerRow: '',
+      headerSticky: 'sticky top-0 z-10 bg-background/90 backdrop-blur-xs',
+      body: '',
+      bodyRow: '',
+      footer: '',
+      edgeCell: '',
+    },
+  };
+
+  const mergedProps: DataGridProps<TData> = {
+    ...defaultProps,
+    ...props,
+    tableLayout: {
+      ...defaultProps.tableLayout,
+      ...(props.tableLayout || {}),
+    },
+    tableClassNames: {
+      ...defaultProps.tableClassNames,
+      ...(props.tableClassNames || {}),
+    },
+  };
+
+  // Ensure table is provided
+  if (!table) {
+    throw new Error('DataGrid requires a "table" prop');
+  }
+
+  return (
+    <DataGridProvider table={table} {...mergedProps}>
+      {children}
+    </DataGridProvider>
+  );
+}
+
+function DataGridContainer({
+  children,
+  className,
+  border = true,
+}: {
+  children: ReactNode;
+  className?: string;
+  border?: boolean;
+}) {
+  return (
+    <div data-slot="data-grid" className={cn('grid w-full', border && 'border border-border rounded-lg', className)}>
+      {children}
+    </div>
+  );
+}
+
+export { useDataGrid, DataGridProvider, DataGrid, DataGridContainer, DataGridContext };

package/src/components/ui/data-list.tsx

@@ -0,0 +1,76 @@
+/**
+ * DataList — key/value display (HTML <dl>).
+ *
+ * Two flavours:
+ *   - Pass `items` prop: array of { label, value, mono? }
+ *   - Or compose with <DataListItem> children for richer cells
+ *
+ * <DataList items={[
+ *   { label: 'Serial', value: 'P901-00042', mono: true },
+ *   { label: 'Status', value: <Badge>Active</Badge> },
+ * ]} />
+ */
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+
+type Item = {
+    label: string;
+    value: React.ReactNode;
+    mono?: boolean;
+};
+
+type Props = {
+    items?: Item[];
+    children?: React.ReactNode;
+    className?: string;
+};
+
+export function DataList({ items, children, className }: Props) {
+    return (
+        <dl
+            className={cn(
+                'divide-y divide-border rounded-lg border bg-card',
+                className,
+            )}
+        >
+            {items
+                ? items.map((item) => (
+                      <DataListItem
+                          key={item.label}
+                          label={item.label}
+                          mono={item.mono}
+                      >
+                          {item.value}
+                      </DataListItem>
+                  ))
+                : children}
+        </dl>
+    );
+}
+
+export function DataListItem({
+    label,
+    mono,
+    children,
+}: {
+    label: string;
+    mono?: boolean;
+    children: React.ReactNode;
+}) {
+    return (
+        <div className="flex flex-col gap-1 px-4 py-3 sm:flex-row sm:items-center sm:gap-4">
+            <dt className="text-xs font-medium uppercase tracking-wide text-muted-foreground sm:w-40">
+                {label}
+            </dt>
+            <dd
+                className={cn(
+                    'flex-1 text-sm text-foreground',
+                    mono && 'font-mono',
+                )}
+            >
+                {children}
+            </dd>
+        </div>
+    );
+}

package/src/components/ui/datefield.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import { cn } from '../../lib/utils';
+import { inputVariants } from './input';
+import type { VariantProps } from 'class-variance-authority';
+import {
+  composeRenderProps,
+  DateFieldProps,
+  DateField as DateFieldRa,
+  DateInputProps as DateInputPropsRa,
+  DateInput as DateInputRa,
+  DateSegmentProps,
+  DateSegment as DateSegmentRa,
+  DateValue as DateValueRa,
+  TimeFieldProps,
+  TimeField as TimeFieldRa,
+  TimeValue as TimeValueRa,
+} from 'react-aria-components';
+
+function DateField<T extends DateValueRa>({ className, children, ...props }: DateFieldProps<T>) {
+  return (
+    <DateFieldRa
+      className={composeRenderProps(className, (className) => cn(className))}
+      data-slot="datefield"
+      {...props}
+    >
+      {children}
+    </DateFieldRa>
+  );
+}
+
+function TimeField<T extends TimeValueRa>({ className, children, ...props }: TimeFieldProps<T>) {
+  return (
+    <TimeFieldRa
+      className={composeRenderProps(className, (className) => cn(className))}
+      data-slot="datefield"
+      {...props}
+    >
+      {children}
+    </TimeFieldRa>
+  );
+}
+
+function DateSegment({ className, ...props }: DateSegmentProps) {
+  return (
+    <DateSegmentRa
+      className={composeRenderProps(className, (className) =>
+        cn(
+          `
+            text-foreground inline-flex rounded px-0.5 caret-transparent outline-hidden data-[type=literal]:text-muted-foreground/70 data-[type=literal]:px-0
+            data-placeholder:text-muted-foreground/70
+            data-invalid:data-focused:bg-destructive data-invalid:data-placeholder:text-destructive data-invalid:text-destructive data-invalid:data-focused:data-placeholder:text-destructive-foreground data-invalid:data-focused:text-destructive-foreground 
+            data-focused:bg-accent data-focused:data-placeholder:text-foreground data-focused:text-foreground             
+            data-disabled:cursor-not-allowed data-disabled:opacity-50
+          `,
+          className,
+        ),
+      )}
+      {...props}
+      data-invalid
+    />
+  );
+}
+
+const dateInputStyles = `
+  relative inline-flex items-center overflow-hidden whitespace-nowrap
+  data-focus-within:ring-ring/30 data-focus-within:border-ring data-focus-within:outline-none data-focus-within:ring-[3px] 
+  data-focus-within:has-aria-invalid:ring-destructive/20 dark:data-focus-within:has-aria-invalid:ring-destructive/40 data-focus-within:has-aria-invalid:border-destructive
+`;
+
+interface DateInputProps extends DateInputPropsRa, VariantProps<typeof inputVariants> {
+  className?: string;
+  variant?: VariantProps<typeof inputVariants>['variant'];
+}
+
+function DateInput({ className, variant = 'md', ...props }: Omit<DateInputProps, 'children'>) {
+  return (
+    <DateInputRa
+      data-slot="input"
+      className={composeRenderProps(className, (className) =>
+        cn(inputVariants({ variant }), dateInputStyles, className),
+      )}
+      {...props}
+    >
+      {(segment) => <DateSegment segment={segment} />}
+    </DateInputRa>
+  );
+}
+
+export { DateField, DateInput, DateSegment, TimeField, dateInputStyles };
+export type { DateInputProps };

package/src/components/ui/dialog.tsx

@@ -0,0 +1,139 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+import { cva, VariantProps } from 'class-variance-authority';
+import { X } from 'lucide-react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+
+const dialogContentVariants = cva(
+  'flex flex-col fixed outline-0 z-50 border border-border bg-background p-6 shadow-lg shadow-black/5 duration-200 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 sm:rounded-lg',
+  {
+    variants: {
+      variant: {
+        default: 'left-[50%] top-[50%] max-w-lg translate-x-[-50%] translate-y-[-50%] w-full',
+        fullscreen: 'inset-5',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        'fixed inset-0 z-50 bg-black/30 [backdrop-filter:blur(4px)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  overlay = true,
+  variant,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> &
+  VariantProps<typeof dialogContentVariants> & {
+    showCloseButton?: boolean;
+    overlay?: boolean;
+  }) {
+  return (
+    <DialogPortal>
+      {overlay && <DialogOverlay />}
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(dialogContentVariants({ variant }), className)}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogClose className="cursor-pointer outline-0 absolute end-5 top-5 rounded-sm opacity-60 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+            <X className="size-4" />
+            <span className="sr-only">Close</span>
+          </DialogClose>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+export default DialogContent;
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    data-slot="dialog-header"
+    className={cn('flex flex-col space-y-1 text-center sm:text-start mb-5', className)}
+    {...props}
+  />
+);
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    data-slot="dialog-footer"
+    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end pt-5 sm:space-x-2.5', className)}
+    {...props}
+  />
+);
+
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+      {...props}
+    />
+  );
+}
+
+const DialogBody = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div data-slot="dialog-body" className={cn('grow', className)} {...props} />
+);
+
+function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};

package/src/components/ui/divider.tsx

@@ -0,0 +1,41 @@
+/**
+ * Divider — horizontal rule with optional centred label.
+ *
+ *   <Divider />
+ *   <Divider>OR</Divider>
+ */
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+
+type Props = {
+    children?: React.ReactNode;
+    className?: string;
+    decorative?: boolean;
+};
+
+export function Divider({ children, className, decorative = true }: Props) {
+    if (!children) {
+        return (
+            <hr
+                role={decorative ? 'presentation' : 'separator'}
+                aria-hidden={decorative ? 'true' : undefined}
+                className={cn('my-4 border-border', className)}
+            />
+        );
+    }
+
+    return (
+        <div
+            role={decorative ? 'presentation' : 'separator'}
+            aria-hidden={decorative ? 'true' : undefined}
+            className={cn('my-4 flex items-center gap-3', className)}
+        >
+            <span className="h-px flex-1 bg-border" />
+            <span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                {children}
+            </span>
+            <span className="h-px flex-1 bg-border" />
+        </div>
+    );
+}

package/src/components/ui/drawer.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import * as React from 'react';
+import { Drawer as DrawerPrimitive } from 'vaul';
+import { cn } from '../../lib/utils';
+
+const Drawer = ({ shouldScaleBackground = true, ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+    <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />
+);
+
+function DrawerTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+    return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
+}
+
+function DrawerPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+    return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
+}
+
+function DrawerClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+    return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
+}
+
+function DrawerOverlay({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+    return <DrawerPrimitive.Overlay data-slot="drawer-overlay" className={cn('fixed inset-0 z-50 bg-black/80', className)} {...props} />;
+}
+
+function DrawerContent({ className, children, ...props }: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+    return (
+        <DrawerPortal>
+            <DrawerOverlay />
+            <DrawerPrimitive.Content
+                data-slot="drawer-content"
+                className={cn('bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border', className)}
+                {...props}
+            >
+                <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+                {children}
+            </DrawerPrimitive.Content>
+        </DrawerPortal>
+    );
+}
+
+const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+    <div data-slot="drawer-header" className={cn('grid gap-1.5 p-4 text-center sm:text-left', className)} {...props} />
+);
+
+const DrawerFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+    <div data-slot="drawer-footer" className={cn('mt-auto flex flex-col gap-2 p-4', className)} {...props} />
+);
+
+function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+    return <DrawerPrimitive.Title data-slot="drawer-title" className={cn('text-lg font-semibold leading-none tracking-tight', className)} {...props} />;
+}
+
+function DrawerDescription({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+    return <DrawerPrimitive.Description data-slot="drawer-description" className={cn('text-sm text-muted-foreground', className)} {...props} />;
+}
+
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger };