@trackany-device/components 1.0.0

package/src/components/ui/scroll-area.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import { cn } from '../../lib/utils';
+
+function ScrollArea({
+    className,
+    viewportClassName,
+    children,
+    viewportRef,
+    ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root> & {
+    viewportRef?: React.Ref<HTMLDivElement>;
+    viewportClassName?: string;
+}) {
+    return (
+        <ScrollAreaPrimitive.Root data-slot="scroll-area" className={cn('relative overflow-hidden', className)} {...props}>
+            <ScrollAreaPrimitive.Viewport ref={viewportRef} className={cn('h-full w-full rounded-[inherit]', viewportClassName)}>
+                {children}
+            </ScrollAreaPrimitive.Viewport>
+            <ScrollBar />
+            <ScrollAreaPrimitive.Corner />
+        </ScrollAreaPrimitive.Root>
+    );
+}
+
+function ScrollBar({
+    className,
+    orientation = 'vertical',
+    ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+    return (
+        <ScrollAreaPrimitive.ScrollAreaScrollbar
+            data-slot="scroll-area-scrollbar"
+            orientation={orientation}
+            className={cn(
+                'flex touch-none select-none transition-colors',
+                orientation === 'vertical' && 'h-full w-2 border-l border-l-transparent p-[1px]',
+                orientation === 'horizontal' && 'h-2 flex-col border-t border-t-transparent p-[1px]',
+                className,
+            )}
+            {...props}
+        >
+            <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+        </ScrollAreaPrimitive.ScrollAreaScrollbar>
+    );
+}
+
+export { ScrollArea, ScrollBar };

package/src/components/ui/select.tsx

@@ -0,0 +1,234 @@
+'use client';
+
+import * as React from 'react';
+import { isValidElement, ReactNode } from 'react';
+import { cn } from '../../lib/utils';
+import { cva, VariantProps } from 'class-variance-authority';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+
+// Create a Context for `indicatorPosition` and `indicator` control
+const SelectContext = React.createContext<{
+  indicatorPosition: 'left' | 'right';
+  indicatorVisibility: boolean;
+  indicator: ReactNode;
+}>({ indicatorPosition: 'left', indicator: null, indicatorVisibility: true });
+
+// Root Component
+const Select = ({
+  indicatorPosition = 'left',
+  indicatorVisibility = true,
+  indicator,
+  ...props
+}: {
+  indicatorPosition?: 'left' | 'right';
+  indicatorVisibility?: boolean;
+  indicator?: ReactNode;
+} & React.ComponentProps<typeof SelectPrimitive.Root>) => {
+  return (
+    <SelectContext.Provider value={{ indicatorPosition, indicatorVisibility, indicator }}>
+      <SelectPrimitive.Root {...props} />
+    </SelectContext.Provider>
+  );
+};
+
+function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+// Define size variants for SelectTrigger
+const selectTriggerVariants = cva(
+  `
+    flex bg-background w-full items-center justify-between outline-none border border-input shadow-xs shadow-black/5 transition-shadow 
+    text-foreground data-placeholder:text-muted-foreground focus-visible:border-ring focus-visible:outline-none focus-visible:ring-[3px] 
+    focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 
+    aria-invalid:border-destructive/60 aria-invalid:ring-destructive/10 dark:aria-invalid:border-destructive dark:aria-invalid:ring-destructive/20
+    [[data-invalid=true]_&]:border-destructive/60 [[data-invalid=true]_&]:ring-destructive/10  dark:[[data-invalid=true]_&]:border-destructive dark:[[data-invalid=true]_&]:ring-destructive/20
+  `,
+  {
+    variants: {
+      size: {
+        sm: 'h-7 px-2.5 text-xs gap-1 rounded-md',
+        md: 'h-8.5 px-3 text-[0.8125rem] leading-(--text-sm--line-height) gap-1 rounded-md',
+        lg: 'h-10 px-4 text-sm gap-1.5 rounded-md',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  },
+);
+
+export interface SelectTriggerProps
+  extends React.ComponentProps<typeof SelectPrimitive.Trigger>,
+    VariantProps<typeof selectTriggerVariants> {}
+
+function SelectTrigger({ className, children, size, ...props }: SelectTriggerProps) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      className={cn(selectTriggerVariants({ size }), className)}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDown className="h-4 w-4 opacity-60 -me-0.5" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn('flex cursor-default items-center justify-center py-1', className)}
+      {...props}
+    >
+      <ChevronUp className="h-4 w-4" />
+    </SelectPrimitive.ScrollUpButton>
+  );
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn('flex cursor-default items-center justify-center py-1', className)}
+      {...props}
+    >
+      <ChevronDown className="h-4 w-4" />
+    </SelectPrimitive.ScrollDownButton>
+  );
+}
+
+function SelectContent({
+  className,
+  children,
+  position = 'popper',
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover shadow-md shadow-black/5 text-secondary-foreground 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',
+          position === 'popper' &&
+            'data-[side=bottom]:translate-y-1.5 data-[side=left]:-translate-x-1.5 data-[side=right]:translate-x-1.5 data-[side=top]:-translate-y-1.5',
+          className,
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            'p-1.5',
+            position === 'popper' &&
+              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn('py-1.5 ps-8 pe-2 text-xs text-muted-foreground font-medium', className)}
+      {...props}
+    />
+  );
+}
+
+function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  const { indicatorPosition, indicatorVisibility, indicator } = React.useContext(SelectContext);
+
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 text-sm outline-hidden text-foreground hover:bg-accent focus:bg-accent data-disabled:pointer-events-none data-disabled:opacity-50',
+        indicatorPosition === 'left' ? 'ps-8 pe-2' : 'pe-8 ps-2',
+        className,
+      )}
+      {...props}
+    >
+      {indicatorVisibility &&
+        (indicator && isValidElement(indicator) ? (
+          indicator
+        ) : (
+          <span
+            className={cn(
+              'absolute flex h-3.5 w-3.5 items-center justify-center',
+              indicatorPosition === 'left' ? 'start-2' : 'end-2',
+            )}
+          >
+            <SelectPrimitive.ItemIndicator>
+              <Check className="h-4 w-4 text-primary" />
+            </SelectPrimitive.ItemIndicator>
+          </span>
+        ))}
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectIndicator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ItemIndicator>) {
+  const { indicatorPosition } = React.useContext(SelectContext);
+
+  return (
+    <span
+      data-slot="select-indicator"
+      className={cn(
+        'absolute flex top-1/2 -translate-y-1/2 items-center justify-center',
+        indicatorPosition === 'left' ? 'start-2' : 'end-2',
+        className,
+      )}
+      {...props}
+    >
+      <SelectPrimitive.ItemIndicator>{children}</SelectPrimitive.ItemIndicator>
+    </span>
+  );
+}
+
+function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn('-mx-1.5 my-1.5 h-px bg-border', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectIndicator,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};

package/src/components/ui/separator.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+
+function Separator({
+  className,
+  orientation = 'horizontal',
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn('shrink-0 bg-border', orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px', className)}
+      {...props}
+    />
+  );
+}
+
+export { Separator };

package/src/components/ui/sheet.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { X } from 'lucide-react';
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+function SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-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}
+    />
+  );
+}
+
+const sheetVariants = cva(
+  'flex flex-col items-strech fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-400',
+  {
+    variants: {
+      side: {
+        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        bottom:
+          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 start-0 h-full w-3/4 border-e data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm rtl:data-[state=closed]:slide-out-to-right rtl:data-[state=open]:slide-in-from-right',
+        right:
+          'inset-y-0 end-0 h-full w-3/4  border-s data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm rtl:data-[state=closed]:slide-out-to-left rtl:data-[state=open]:slide-in-from-left',
+      },
+    },
+    defaultVariants: {
+      side: 'right',
+    },
+  },
+);
+
+interface SheetContentProps
+  extends React.ComponentProps<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {
+  overlay?: boolean;
+  close?: boolean;
+}
+
+function SheetContent({
+  side = 'right',
+  overlay = true,
+  close = true,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & SheetContentProps) {
+  return (
+    <SheetPortal>
+      {overlay && <SheetOverlay />}
+      <SheetPrimitive.Content className={cn(sheetVariants({ side }), className)} {...props}>
+        {children}
+        {close && (
+          <SheetPrimitive.Close
+            data-slot="sheet-close"
+            className="cursor-pointer absolute end-5 top-4 rounded-sm opacity-60 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
+          >
+            <X className="h-4 w-4" />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  );
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn('flex flex-col space-y-1 text-center sm:text-start', className)}
+      {...props}
+    />
+  );
+}
+
+function SheetBody({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div data-slot="sheet-body" className={cn('py-2.5', className)} {...props} />;
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
+      {...props}
+    />
+  );
+}
+
+function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn('text-base font-semibold text-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+function SheetDescription({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sheet,
+  SheetBody,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+};