@syncular/ui 0.0.0

package/src/primitives/button.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { cva, type VariantProps } from 'class-variance-authority';
+import { type ComponentPropsWithoutRef, forwardRef } from 'react';
+import { cn } from '../lib/cn';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-1.5 rounded-md font-mono transition-all cursor-pointer disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default:
+          'border border-border-bright bg-transparent text-neutral-400 hover:text-white hover:bg-white/[0.03]',
+        primary: 'border border-flow bg-flow/10 text-flow hover:bg-flow/20',
+        destructive:
+          'border border-offline bg-offline/10 text-offline hover:bg-offline/20',
+        ghost:
+          'border border-transparent bg-transparent text-neutral-400 hover:text-white hover:bg-white/[0.03]',
+        link: 'border border-transparent bg-transparent text-neutral-400 underline underline-offset-4 hover:text-white',
+        secondary:
+          'border border-border bg-panel text-neutral-400 hover:text-white hover:bg-white/[0.03]',
+      },
+      size: {
+        sm: 'text-[10px] px-2.5 py-1',
+        md: 'text-[11px] px-3.5 py-1.5',
+        icon: 'h-8 w-8',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+    },
+  }
+);
+
+type ButtonProps = ComponentPropsWithoutRef<'button'> &
+  VariantProps<typeof buttonVariants>;
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => (
+    <button
+      ref={ref}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };
+export type { ButtonProps };

package/src/primitives/card.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import { type ComponentPropsWithoutRef, forwardRef } from 'react';
+import { cn } from '../lib/cn';
+
+const Card = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'bg-panel border border-border rounded-lg hover:border-border-bright transition',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Card.displayName = 'Card';
+
+const CardHeader = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'px-4 py-2.5 border-b border-border flex items-center justify-between',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = forwardRef<
+  HTMLHeadingElement,
+  ComponentPropsWithoutRef<'h3'>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      'font-mono text-[10px] text-neutral-500 uppercase tracking-widest',
+      className
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = 'CardTitle';
+
+const CardContent = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('p-4', className)} {...props} />
+  )
+);
+CardContent.displayName = 'CardContent';
+
+const CardFooter = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('px-4 py-2.5 border-t border-border', className)}
+      {...props}
+    />
+  )
+);
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardTitle, CardContent, CardFooter };

package/src/primitives/dialog.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { Dialog as BaseDialog } from '@base-ui/react/dialog';
+import {
+  type ComponentPropsWithoutRef,
+  forwardRef,
+  type HTMLAttributes,
+} from 'react';
+import { cn } from '../lib/cn';
+
+const Dialog = BaseDialog.Root;
+
+const DialogTrigger = BaseDialog.Trigger;
+
+const DialogPortal = BaseDialog.Portal;
+
+const DialogClose = BaseDialog.Close;
+
+const DialogOverlay = forwardRef<
+  HTMLDivElement,
+  ComponentPropsWithoutRef<typeof BaseDialog.Backdrop>
+>(({ className, ...props }, ref) => (
+  <BaseDialog.Backdrop
+    ref={ref}
+    className={cn('fixed inset-0 z-50 bg-black/60 backdrop-blur-sm', className)}
+    {...props}
+  />
+));
+DialogOverlay.displayName = 'DialogOverlay';
+
+const DialogContent = forwardRef<
+  HTMLDivElement,
+  ComponentPropsWithoutRef<typeof BaseDialog.Popup>
+>(({ className, children, ...props }, ref) => (
+  <BaseDialog.Portal>
+    <BaseDialog.Backdrop className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm" />
+    <BaseDialog.Popup
+      ref={ref}
+      className={cn(
+        'fixed z-50 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-panel border border-border rounded-lg shadow-lg max-w-lg w-full p-0',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </BaseDialog.Popup>
+  </BaseDialog.Portal>
+));
+DialogContent.displayName = 'DialogContent';
+
+const DialogHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('px-5 py-3 border-b border-border', className)}
+      {...props}
+    />
+  )
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'px-5 py-3 border-t border-border flex justify-end gap-2',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = forwardRef<
+  HTMLHeadingElement,
+  ComponentPropsWithoutRef<typeof BaseDialog.Title>
+>(({ className, ...props }, ref) => (
+  <BaseDialog.Title
+    ref={ref}
+    className={cn(
+      'font-mono text-[10px] text-neutral-500 uppercase tracking-widest',
+      className
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = 'DialogTitle';
+
+const DialogDescription = forwardRef<
+  HTMLParagraphElement,
+  ComponentPropsWithoutRef<typeof BaseDialog.Description>
+>(({ className, ...props }, ref) => (
+  <BaseDialog.Description
+    ref={ref}
+    className={cn('text-sm text-neutral-400', className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = 'DialogDescription';
+
+export {
+  Dialog,
+  DialogTrigger,
+  DialogPortal,
+  DialogClose,
+  DialogOverlay,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};

package/src/primitives/index.ts

@@ -0,0 +1,15 @@
+export * from './alert';
+export * from './badge';
+export * from './button';
+export * from './card';
+export * from './dialog';
+export * from './input';
+export * from './pagination';
+export * from './separator';
+export * from './sheet';
+export * from './skeleton';
+export * from './spinner';
+export * from './switch';
+export * from './table';
+export * from './tabs';
+export * from './tooltip';

package/src/primitives/input.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { cva, type VariantProps } from 'class-variance-authority';
+import { type ComponentPropsWithoutRef, forwardRef } from 'react';
+import { cn } from '../lib/cn';
+
+const inputVariants = cva(
+  'bg-surface border border-border rounded-md px-3 py-1.5 text-foreground outline-none w-full transition focus:border-flow placeholder:text-neutral-600',
+  {
+    variants: {
+      variant: {
+        default: 'font-sans text-[13px]',
+        mono: 'font-mono text-[12px]',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+type InputProps = ComponentPropsWithoutRef<'input'> &
+  VariantProps<typeof inputVariants>;
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, variant, ...props }, ref) => (
+    <input
+      ref={ref}
+      className={cn(inputVariants({ variant, className }))}
+      {...props}
+    />
+  )
+);
+Input.displayName = 'Input';
+
+export { Input, inputVariants };
+export type { InputProps };

package/src/primitives/pagination.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { forwardRef, type HTMLAttributes } from 'react';
+import { cn } from '../lib/cn';
+import { Button } from './button';
+
+type PaginationProps = HTMLAttributes<HTMLDivElement> & {
+  page: number;
+  totalPages: number;
+  totalItems: number;
+  onPageChange: (page: number) => void;
+};
+
+const Pagination = forwardRef<HTMLDivElement, PaginationProps>(
+  (
+    { className, page, totalPages, totalItems, onPageChange, ...props },
+    ref
+  ) => (
+    <div
+      ref={ref}
+      className={cn(
+        'px-5 py-2.5 border-t border-border flex items-center justify-between',
+        className
+      )}
+      {...props}
+    >
+      <span className="font-mono text-[10px] text-neutral-600">
+        {totalItems} items · Page {page} of {totalPages}
+      </span>
+      <div className="flex gap-2">
+        <Button
+          size="sm"
+          variant="default"
+          disabled={page <= 1}
+          onClick={() => onPageChange(page - 1)}
+        >
+          Prev
+        </Button>
+        <Button
+          size="sm"
+          variant="default"
+          disabled={page >= totalPages}
+          onClick={() => onPageChange(page + 1)}
+        >
+          Next
+        </Button>
+      </div>
+    </div>
+  )
+);
+Pagination.displayName = 'Pagination';
+
+export { Pagination };
+export type { PaginationProps };

package/src/primitives/separator.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { type ComponentPropsWithoutRef, forwardRef } from 'react';
+import { cn } from '../lib/cn';
+
+type SeparatorProps = Omit<ComponentPropsWithoutRef<'hr'>, 'children'> & {
+  orientation?: 'horizontal' | 'vertical';
+};
+
+const Separator = forwardRef<HTMLHRElement, SeparatorProps>(
+  ({ className, orientation = 'horizontal', ...props }, ref) => (
+    <hr
+      ref={ref}
+      aria-orientation={orientation === 'vertical' ? 'vertical' : undefined}
+      className={cn(
+        'border-none m-0',
+        orientation === 'horizontal'
+          ? 'h-px w-full bg-border'
+          : 'w-px h-4 bg-border',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Separator.displayName = 'Separator';
+
+export { Separator };
+export type { SeparatorProps };

package/src/primitives/sheet.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { Dialog as BaseDialog } from '@base-ui/react/dialog';
+import { cva, type VariantProps } from 'class-variance-authority';
+import {
+  type ComponentPropsWithoutRef,
+  forwardRef,
+  type HTMLAttributes,
+} from 'react';
+import { cn } from '../lib/cn';
+
+const Sheet = BaseDialog.Root;
+
+const SheetTrigger = BaseDialog.Trigger;
+
+const sheetContentVariants = cva(
+  'fixed z-50 bg-panel shadow-lg overflow-auto',
+  {
+    variants: {
+      side: {
+        top: 'top-0 left-0 w-full h-[400px] border-b border-border',
+        right: 'right-0 top-0 h-full w-[400px] border-l border-border',
+        bottom: 'bottom-0 left-0 w-full h-[400px] border-t border-border',
+        left: 'left-0 top-0 h-full w-[400px] border-r border-border',
+      },
+    },
+    defaultVariants: {
+      side: 'right',
+    },
+  }
+);
+
+type SheetContentProps = ComponentPropsWithoutRef<typeof BaseDialog.Popup> &
+  VariantProps<typeof sheetContentVariants>;
+
+const SheetContent = forwardRef<HTMLDivElement, SheetContentProps>(
+  ({ className, side, children, ...props }, ref) => (
+    <BaseDialog.Portal>
+      <BaseDialog.Backdrop className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm" />
+      <BaseDialog.Popup
+        ref={ref}
+        className={cn(sheetContentVariants({ side, className }))}
+        {...props}
+      >
+        {children}
+      </BaseDialog.Popup>
+    </BaseDialog.Portal>
+  )
+);
+SheetContent.displayName = 'SheetContent';
+
+const SheetHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('px-5 py-3 border-b border-border', className)}
+      {...props}
+    />
+  )
+);
+SheetHeader.displayName = 'SheetHeader';
+
+const SheetFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'px-5 py-3 border-t border-border flex justify-end gap-2',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+SheetFooter.displayName = 'SheetFooter';
+
+const SheetTitle = forwardRef<
+  HTMLHeadingElement,
+  ComponentPropsWithoutRef<typeof BaseDialog.Title>
+>(({ className, ...props }, ref) => (
+  <BaseDialog.Title
+    ref={ref}
+    className={cn(
+      'font-mono text-[10px] text-neutral-500 uppercase tracking-widest',
+      className
+    )}
+    {...props}
+  />
+));
+SheetTitle.displayName = 'SheetTitle';
+
+const SheetDescription = forwardRef<
+  HTMLParagraphElement,
+  ComponentPropsWithoutRef<typeof BaseDialog.Description>
+>(({ className, ...props }, ref) => (
+  <BaseDialog.Description
+    ref={ref}
+    className={cn('text-sm text-neutral-400', className)}
+    {...props}
+  />
+));
+SheetDescription.displayName = 'SheetDescription';
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetContent,
+  sheetContentVariants,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};
+export type { SheetContentProps };

package/src/primitives/skeleton.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { type ComponentPropsWithoutRef, forwardRef } from 'react';
+import { cn } from '../lib/cn';
+
+const Skeleton = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('rounded-md bg-neutral-800 animate-pulse', className)}
+      {...props}
+    />
+  )
+);
+Skeleton.displayName = 'Skeleton';
+
+export { Skeleton };

package/src/primitives/spinner.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { cva, type VariantProps } from 'class-variance-authority';
+import { type ComponentPropsWithoutRef, forwardRef } from 'react';
+import { cn } from '../lib/cn';
+
+const spinnerVariants = cva('animate-spin text-neutral-500', {
+  variants: {
+    size: {
+      sm: 'h-3 w-3',
+      md: 'h-5 w-5',
+      lg: 'h-8 w-8',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+type SpinnerProps = Omit<ComponentPropsWithoutRef<'svg'>, 'children'> &
+  VariantProps<typeof spinnerVariants>;
+
+const Spinner = forwardRef<SVGSVGElement, SpinnerProps>(
+  ({ className, size, ...props }, ref) => (
+    <svg
+      ref={ref}
+      className={cn(spinnerVariants({ size, className }))}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <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 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+  )
+);
+Spinner.displayName = 'Spinner';
+
+export { Spinner, spinnerVariants };
+export type { SpinnerProps };

package/src/primitives/switch.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { Switch as BaseSwitch } from '@base-ui/react/switch';
+import { type ComponentPropsWithoutRef, forwardRef } from 'react';
+import { cn } from '../lib/cn';
+
+type SwitchProps = ComponentPropsWithoutRef<typeof BaseSwitch.Root>;
+
+const Switch = forwardRef<HTMLButtonElement, SwitchProps>(
+  ({ className, ...props }, ref) => (
+    <BaseSwitch.Root
+      ref={ref}
+      className={cn(
+        'relative w-[34px] h-[18px] bg-border-bright rounded-full cursor-pointer transition data-[checked]:bg-healthy',
+        className
+      )}
+      {...props}
+    >
+      <BaseSwitch.Thumb className="block w-[14px] h-[14px] bg-white rounded-full transition-transform data-[checked]:translate-x-4 absolute top-0.5 left-0.5" />
+    </BaseSwitch.Root>
+  )
+);
+Switch.displayName = 'Switch';
+
+export { Switch };
+export type { SwitchProps };

package/src/primitives/table.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { type ComponentPropsWithoutRef, forwardRef } from 'react';
+import { cn } from '../lib/cn';
+
+const Table = forwardRef<HTMLTableElement, ComponentPropsWithoutRef<'table'>>(
+  ({ className, ...props }, ref) => (
+    <table ref={ref} className={cn('w-full', className)} {...props} />
+  )
+);
+Table.displayName = 'Table';
+
+const TableHeader = forwardRef<
+  HTMLTableSectionElement,
+  ComponentPropsWithoutRef<'thead'>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn(className)} {...props} />
+));
+TableHeader.displayName = 'TableHeader';
+
+const TableBody = forwardRef<
+  HTMLTableSectionElement,
+  ComponentPropsWithoutRef<'tbody'>
+>(({ className, ...props }, ref) => (
+  <tbody ref={ref} className={cn(className)} {...props} />
+));
+TableBody.displayName = 'TableBody';
+
+const TableRow = forwardRef<
+  HTMLTableRowElement,
+  ComponentPropsWithoutRef<'tr'>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      'font-mono text-[11px] leading-7 px-4 flex items-center gap-4 border-b border-[#141414] hover:bg-white/[0.015] transition-colors cursor-default',
+      className
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = 'TableRow';
+
+const TableHead = forwardRef<
+  HTMLTableCellElement,
+  ComponentPropsWithoutRef<'th'>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      'font-mono text-[9px] text-neutral-600 uppercase tracking-wider leading-6 bg-white/[0.01] text-left',
+      className
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = 'TableHead';
+
+const TableCell = forwardRef<
+  HTMLTableCellElement,
+  ComponentPropsWithoutRef<'td'>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn('whitespace-nowrap overflow-hidden text-ellipsis', className)}
+    {...props}
+  />
+));
+TableCell.displayName = 'TableCell';
+
+export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell };