@invect/ui 0.0.1

package/src/components/triggers/CronPreview.tsx

@@ -0,0 +1,243 @@
+'use client';
+
+import { useMemo } from 'react';
+import { Clock, AlertCircle } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+interface CronPreviewProps {
+  /** Cron expression (e.g. "0 * * * *") */
+  expression: string;
+  /** IANA timezone (e.g. "America/New_York") */
+  timezone?: string;
+  className?: string;
+}
+
+/**
+ * Shows a human-readable preview of a cron expression + next fire time.
+ */
+export function CronPreview({ expression, timezone = 'UTC', className }: CronPreviewProps) {
+  const { description, nextRun, isValid } = useMemo(() => {
+    return parseCronPreview(expression, timezone);
+  }, [expression, timezone]);
+
+  if (!expression.trim()) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        'rounded-md border px-3 py-2 text-xs',
+        isValid
+          ? 'border-border bg-muted/30 text-muted-foreground'
+          : 'border-destructive/30 bg-destructive/5 text-destructive',
+        className,
+      )}
+    >
+      {isValid ? (
+        <div className="space-y-1">
+          <div className="flex items-center gap-1.5">
+            <Clock className="h-3 w-3" />
+            <span className="font-medium">{description}</span>
+          </div>
+          {nextRun && (
+            <div className="text-[10px] opacity-75">
+              Next run: {nextRun} ({timezone})
+            </div>
+          )}
+        </div>
+      ) : (
+        <div className="flex items-center gap-1.5">
+          <AlertCircle className="h-3 w-3" />
+          <span>Invalid cron expression</span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Cron Parsing ──────────────────────────────────────────────
+
+interface CronPreviewResult {
+  description: string;
+  nextRun: string | null;
+  isValid: boolean;
+}
+
+/**
+ * Lightweight cron expression → human-readable description.
+ * Handles common patterns without pulling in a heavy library.
+ */
+function parseCronPreview(expression: string, _timezone: string): CronPreviewResult {
+  const parts = expression.trim().split(/\s+/);
+  if (parts.length < 5 || parts.length > 6) {
+    return { description: '', nextRun: null, isValid: false };
+  }
+
+  const [minute, hour, dayOfMonth, month, dayOfWeek] = parts;
+
+  try {
+    const description = describeCron(minute, hour, dayOfMonth, month, dayOfWeek);
+    // Approximate next run (simple heuristic, not timezone-aware)
+    const nextRun = approximateNextRun(minute, hour);
+
+    return { description, nextRun, isValid: true };
+  } catch {
+    return { description: '', nextRun: null, isValid: false };
+  }
+}
+
+function describeCron(
+  minute: string,
+  hour: string,
+  dayOfMonth: string,
+  month: string,
+  dayOfWeek: string,
+): string {
+  // Every minute
+  if (minute === '*' && hour === '*' && dayOfMonth === '*' && month === '*' && dayOfWeek === '*') {
+    return 'Every minute';
+  }
+
+  // Every N minutes
+  if (minute.startsWith('*/') && hour === '*') {
+    return `Every ${minute.slice(2)} minutes`;
+  }
+
+  // Every hour at :MM
+  if (minute !== '*' && hour === '*' && dayOfMonth === '*' && month === '*' && dayOfWeek === '*') {
+    return `Every hour at :${minute.padStart(2, '0')}`;
+  }
+
+  // Every N hours
+  if (minute === '0' && hour.startsWith('*/')) {
+    return `Every ${hour.slice(2)} hours`;
+  }
+
+  // Daily at HH:MM
+  if (minute !== '*' && hour !== '*' && dayOfMonth === '*' && month === '*' && dayOfWeek === '*') {
+    return `Daily at ${formatTime(hour, minute)}`;
+  }
+
+  // Weekdays at HH:MM
+  if (
+    minute !== '*' &&
+    hour !== '*' &&
+    dayOfMonth === '*' &&
+    month === '*' &&
+    (dayOfWeek === '1-5' || dayOfWeek === 'MON-FRI')
+  ) {
+    return `Weekdays at ${formatTime(hour, minute)}`;
+  }
+
+  // Weekly on specific day
+  if (minute !== '*' && hour !== '*' && dayOfMonth === '*' && month === '*' && dayOfWeek !== '*') {
+    const day = dayName(dayOfWeek);
+    return `${day} at ${formatTime(hour, minute)}`;
+  }
+
+  // Fallback: show the raw expression parts
+  return `${expression(minute, hour, dayOfMonth, month, dayOfWeek)}`;
+}
+
+function expression(min: string, hr: string, dom: string, mon: string, dow: string): string {
+  const parts = [];
+  if (min !== '*') {
+    parts.push(`min ${min}`);
+  }
+  if (hr !== '*') {
+    parts.push(`hour ${hr}`);
+  }
+  if (dom !== '*') {
+    parts.push(`day ${dom}`);
+  }
+  if (mon !== '*') {
+    parts.push(`month ${mon}`);
+  }
+  if (dow !== '*') {
+    parts.push(`weekday ${dow}`);
+  }
+  return parts.join(', ') || 'Every minute';
+}
+
+function formatTime(hour: string, minute: string): string {
+  const h = parseInt(hour, 10);
+  const m = minute.padStart(2, '0');
+  if (h === 0) {
+    return `12:${m} AM`;
+  }
+  if (h < 12) {
+    return `${h}:${m} AM`;
+  }
+  if (h === 12) {
+    return `12:${m} PM`;
+  }
+  return `${h - 12}:${m} PM`;
+}
+
+function dayName(dow: string): string {
+  const names: Record<string, string> = {
+    '0': 'Sundays',
+    '1': 'Mondays',
+    '2': 'Tuesdays',
+    '3': 'Wednesdays',
+    '4': 'Thursdays',
+    '5': 'Fridays',
+    '6': 'Saturdays',
+    '7': 'Sundays',
+    SUN: 'Sundays',
+    MON: 'Mondays',
+    TUE: 'Tuesdays',
+    WED: 'Wednesdays',
+    THU: 'Thursdays',
+    FRI: 'Fridays',
+    SAT: 'Saturdays',
+  };
+  return names[dow.toUpperCase()] ?? `Day ${dow}`;
+}
+
+function approximateNextRun(minute: string, hour: string): string | null {
+  try {
+    const now = new Date();
+    let next: Date;
+
+    if (minute === '*' && hour === '*') {
+      next = new Date(now.getTime() + 60_000);
+    } else if (minute.startsWith('*/')) {
+      const interval = parseInt(minute.slice(2), 10);
+      const currentMin = now.getMinutes();
+      const nextMin = Math.ceil((currentMin + 1) / interval) * interval;
+      next = new Date(now);
+      next.setMinutes(nextMin, 0, 0);
+      if (next <= now) {
+        next.setMinutes(next.getMinutes() + interval);
+      }
+    } else if (hour === '*') {
+      const min = parseInt(minute, 10);
+      next = new Date(now);
+      next.setMinutes(min, 0, 0);
+      if (next <= now) {
+        next.setHours(next.getHours() + 1);
+      }
+    } else {
+      const hr = parseInt(hour, 10);
+      const min = parseInt(minute, 10);
+      next = new Date(now);
+      next.setHours(hr, min, 0, 0);
+      if (next <= now) {
+        next.setDate(next.getDate() + 1);
+      }
+    }
+
+    return next.toLocaleString(undefined, {
+      month: 'short',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: '2-digit',
+    });
+  } catch {
+    return null;
+  }
+}
+
+export default CronPreview;

package/src/components/triggers/index.ts

@@ -0,0 +1 @@
+export { CronPreview } from './CronPreview';

package/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,152 @@
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+
+import { cn } from '~/lib/utils';
+import { useInvectPortalClass } from '~/hooks/use-invect-portal-class';
+import { buttonVariants } from '~/components/ui/button';
+
+function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
+}
+
+function AlertDialogPortal({
+  container,
+  children,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal> & {
+  container?: HTMLElement | null;
+}) {
+  const portalClass = useInvectPortalClass();
+  return (
+    <AlertDialogPrimitive.Portal
+      data-slot="alert-dialog-portal"
+      container={container ?? undefined}
+      {...props}
+    >
+      <div className={portalClass}>{children}</div>
+    </AlertDialogPrimitive.Portal>
+  );
+}
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    ref={ref}
+    data-slot="alert-dialog-overlay"
+    className={cn(
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-background/50',
+      className,
+    )}
+    {...props}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+function AlertDialogContent({
+  className,
+  container,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+  container?: HTMLElement | null;
+}) {
+  return (
+    <AlertDialogPortal container={container}>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          'bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn('text-lg font-semibold', className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return <AlertDialogPrimitive.Action className={cn(buttonVariants(), className)} {...props} />;
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: 'outline' }), className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

package/src/components/ui/badge.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '~/lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+        destructive:
+          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'span';
+
+  return (
+    <Comp data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };

package/src/components/ui/button.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+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-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_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 hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+        'icon-sm': 'size-8',
+        'icon-lg': 'size-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+const Button = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<'button'> &
+    VariantProps<typeof buttonVariants> & {
+      asChild?: boolean;
+    }
+>(({ className, variant, size, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : 'button';
+
+  return (
+    <Comp
+      ref={ref}
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+});
+
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

package/src/components/ui/card.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+
+import { cn } from '~/lib/utils';
+
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-md',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn('leading-none font-semibold', className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div data-slot="card-content" className={cn('px-6', className)} {...props} />;
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
+      {...props}
+    />
+  );
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };