create-blitzpack 0.1.0 → 0.1.2

package/template/packages/ui/package.json

@@ -1,108 +0,0 @@
-{
-  "name": "@repo/packages-ui",
-  "version": "1.0.0",
-  "type": "module",
-  "exports": {
-    "./alert-dialog": "./src/alert-dialog.tsx",
-    "./alert": "./src/alert.tsx",
-    "./animated-theme-toggler": "./src/animated-theme-toggler.tsx",
-    "./avatar": "./src/avatar.tsx",
-    "./badge": "./src/badge.tsx",
-    "./button": "./src/button.tsx",
-    "./card": "./src/card.tsx",
-    "./checkbox": "./src/checkbox.tsx",
-    "./icons/brand-icons": "./src/icons/brand-icons.tsx",
-    "./lib/utils": "./src/lib/utils.ts",
-    "./data-table": "./src/data-table/data-table.tsx",
-    "./data-table/data-table": "./src/data-table/data-table.tsx",
-    "./data-table-column-header": "./src/data-table/data-table-column-header.tsx",
-    "./data-table/data-table-column-header": "./src/data-table/data-table-column-header.tsx",
-    "./data-table-pagination": "./src/data-table/data-table-pagination.tsx",
-    "./data-table/data-table-pagination": "./src/data-table/data-table-pagination.tsx",
-    "./data-table-toolbar": "./src/data-table/data-table-toolbar.tsx",
-    "./data-table/data-table-toolbar": "./src/data-table/data-table-toolbar.tsx",
-    "./data-table-view-options": "./src/data-table/data-table-view-options.tsx",
-    "./data-table/data-table-view-options": "./src/data-table/data-table-view-options.tsx",
-    "./dialog": "./src/dialog.tsx",
-    "./dropdown-menu": "./src/dropdown-menu.tsx",
-    "./empty-state": "./src/empty-state.tsx",
-    "./file-upload-input": "./src/file-upload-input.tsx",
-    "./form": "./src/form.tsx",
-    "./input": "./src/input.tsx",
-    "./label": "./src/label.tsx",
-    "./password-input": "./src/password-input.tsx",
-    "./popover": "./src/popover.tsx",
-    "./radio-group": "./src/radio-group.tsx",
-    "./scroll-area": "./src/scroll-area.tsx",
-    "./select": "./src/select.tsx",
-    "./separator": "./src/separator.tsx",
-    "./sheet": "./src/sheet.tsx",
-    "./sidebar": "./src/sidebar.tsx",
-    "./skeleton": "./src/skeleton.tsx",
-    "./skeleton-variants": "./src/skeleton-variants.tsx",
-    "./slider": "./src/slider.tsx",
-    "./sonner": "./src/sonner.tsx",
-    "./spinner": "./src/spinner.tsx",
-    "./switch": "./src/switch.tsx",
-    "./table": "./src/table.tsx",
-    "./tabs": "./src/tabs.tsx",
-    "./textarea": "./src/textarea.tsx",
-    "./tooltip": "./src/tooltip.tsx",
-    "./user-avatar": "./src/user-avatar.tsx"
-  },
-  "scripts": {
-    "typecheck": "tsc --noEmit",
-    "lint": "eslint src",
-    "lint:fix": "eslint src --fix",
-    "test": "vitest run",
-    "test:unit": "vitest run",
-    "test:integration": "echo 'No integration tests for packages-ui'",
-    "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage"
-  },
-  "peerDependencies": {
-    "react": ">=19.0.0",
-    "react-dom": ">=19.0.0"
-  },
-  "dependencies": {
-    "@hookform/resolvers": "^5.2.2",
-    "@radix-ui/react-alert-dialog": "^1.1.15",
-    "@radix-ui/react-avatar": "^1.1.10",
-    "@radix-ui/react-checkbox": "^1.3.3",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-label": "^2.1.7",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-radio-group": "^1.3.8",
-    "@radix-ui/react-scroll-area": "^1.2.10",
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-separator": "^1.1.7",
-    "@radix-ui/react-slider": "^1.3.6",
-    "@radix-ui/react-slot": "^1.2.3",
-    "@radix-ui/react-switch": "^1.2.6",
-    "@radix-ui/react-tabs": "^1.1.13",
-    "@radix-ui/react-tooltip": "^1.2.8",
-    "@repo/packages-utils": "workspace:*",
-    "@tanstack/react-table": "^8.21.3",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "date-fns": "^4.1.0",
-    "framer-motion": "^12.23.24",
-    "lucide-react": "^0.545.0",
-    "next-themes": "^0.4.6",
-    "react-hook-form": "^7.65.0",
-    "sonner": "^2.0.7",
-    "tailwind-merge": "^3.3.1"
-  },
-  "devDependencies": {
-    "@testing-library/jest-dom": "^6.1.5",
-    "@testing-library/react": "^14.1.2",
-    "@testing-library/user-event": "^14.5.1",
-    "@types/node": "^24.7.1",
-    "@types/react": "19.2.6",
-    "@types/react-dom": "19.2.3",
-    "@vitejs/plugin-react": "^5.0.4",
-    "typescript": "^5.7.2",
-    "vitest": "^3.2.4"
-  }
-}

package/template/packages/ui/src/__tests__/button.test.tsx

@@ -1,70 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, expect, it, vi } from 'vitest';
-
-import { Button } from '../button';
-
-describe('Button', () => {
-  it('should render button with default variant', () => {
-    render(<Button>Click me</Button>);
-    const button = screen.getByRole('button', { name: /click me/i });
-    expect(button).toBeInTheDocument();
-  });
-
-  it('should apply destructive variant classes', () => {
-    render(<Button variant="destructive">Delete</Button>);
-    const button = screen.getByRole('button', { name: /delete/i });
-    expect(button).toHaveClass('bg-destructive');
-  });
-
-  it('should apply outline variant classes', () => {
-    render(<Button variant="outline">Outline</Button>);
-    const button = screen.getByRole('button', { name: /outline/i });
-    expect(button).toHaveClass('border');
-  });
-
-  it('should apply size variants', () => {
-    const { rerender } = render(<Button size="sm">Small</Button>);
-    expect(screen.getByRole('button')).toHaveClass('h-8');
-
-    rerender(<Button size="lg">Large</Button>);
-    expect(screen.getByRole('button')).toHaveClass('h-10');
-
-    rerender(<Button size="icon">Icon</Button>);
-    expect(screen.getByRole('button')).toHaveClass('size-9');
-  });
-
-  it('should handle disabled state', () => {
-    render(<Button disabled>Disabled</Button>);
-    const button = screen.getByRole('button');
-    expect(button).toBeDisabled();
-    expect(button).toHaveClass('disabled:opacity-50');
-  });
-
-  it('should accept custom className', () => {
-    render(<Button className="custom-class">Custom</Button>);
-    const button = screen.getByRole('button');
-    expect(button).toHaveClass('custom-class');
-  });
-
-  it('should handle onClick', async () => {
-    const handleClick = vi.fn();
-    render(<Button onClick={handleClick}>Click</Button>);
-
-    const user = userEvent.setup();
-    await user.click(screen.getByRole('button'));
-    expect(handleClick).toHaveBeenCalledOnce();
-  });
-
-  it('should render as child when asChild is true', () => {
-    render(
-      <Button asChild>
-        <a href="/test">Link Button</a>
-      </Button>
-    );
-
-    const link = screen.getByRole('link');
-    expect(link).toBeInTheDocument();
-    expect(link).toHaveAttribute('href', '/test');
-  });
-});

package/template/packages/ui/src/alert-dialog.tsx

@@ -1,141 +0,0 @@
-'use client';
-
-import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
-import * as React from 'react';
-
-import { buttonVariants } from './button';
-import { cn } from './lib/utils';
-
-const AlertDialog = AlertDialogPrimitive.Root;
-
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
-
-const AlertDialogPortal = AlertDialogPrimitive.Portal;
-
-const AlertDialogOverlay = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.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-black/80',
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
-));
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-
-const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        '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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] bg-background fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
-        className
-      )}
-      {...props}
-    />
-  </AlertDialogPortal>
-));
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
-
-const AlertDialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      'flex flex-col space-y-2 text-center sm:text-left',
-      className
-    )}
-    {...props}
-  />
-);
-AlertDialogHeader.displayName = 'AlertDialogHeader';
-
-const AlertDialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
-      className
-    )}
-    {...props}
-  />
-);
-AlertDialogFooter.displayName = 'AlertDialogFooter';
-
-const AlertDialogTitle = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title
-    ref={ref}
-    className={cn('text-lg font-semibold', className)}
-    {...props}
-  />
-));
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-
-const AlertDialogDescription = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description
-    ref={ref}
-    className={cn('text-muted-foreground text-sm', className)}
-    {...props}
-  />
-));
-AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName;
-
-const AlertDialogAction = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action
-    ref={ref}
-    className={cn(buttonVariants(), className)}
-    {...props}
-  />
-));
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-
-const AlertDialogCancel = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Cancel
-    ref={ref}
-    className={cn(
-      buttonVariants({ variant: 'outline' }),
-      'mt-2 sm:mt-0',
-      className
-    )}
-    {...props}
-  />
-));
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
-
-export {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogOverlay,
-  AlertDialogPortal,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-};

package/template/packages/ui/src/alert.tsx

@@ -1,66 +0,0 @@
-import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-
-import { cn } from './lib/utils';
-
-const alertVariants = cva(
-  'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
-  {
-    variants: {
-      variant: {
-        default: 'bg-card text-card-foreground',
-        destructive:
-          'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  }
-);
-
-function Alert({
-  className,
-  variant,
-  ...props
-}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
-  return (
-    <div
-      data-slot="alert"
-      role="alert"
-      className={cn(alertVariants({ variant }), className)}
-      {...props}
-    />
-  );
-}
-
-function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="alert-title"
-      className={cn(
-        'col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight',
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function AlertDescription({
-  className,
-  ...props
-}: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="alert-description"
-      className={cn(
-        'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Alert, AlertDescription, AlertTitle };

package/template/packages/ui/src/animated-theme-toggler.tsx

@@ -1,167 +0,0 @@
-'use client';
-
-import { AnimatePresence, motion } from 'framer-motion';
-import { Moon, Sun } from 'lucide-react';
-import { useTheme } from 'next-themes';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { flushSync } from 'react-dom';
-
-import { cn } from './lib/utils';
-
-interface AnimatedThemeTogglerProps {
-  className?: string;
-  duration?: number;
-}
-
-export const AnimatedThemeToggler = ({
-  className,
-  duration = 600,
-}: AnimatedThemeTogglerProps) => {
-  const { theme, setTheme } = useTheme();
-  const [mounted, setMounted] = useState(false);
-  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
-  const [isHovered, setIsHovered] = useState(false);
-  const buttonRef = useRef<HTMLButtonElement>(null);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  const handleMouseMove = useCallback(
-    (e: React.MouseEvent<HTMLButtonElement>) => {
-      if (!buttonRef.current) return;
-
-      const rect = buttonRef.current.getBoundingClientRect();
-      const centerX = rect.left + rect.width / 2;
-      const centerY = rect.top + rect.height / 2;
-
-      const deltaX = (e.clientX - centerX) / 10;
-      const deltaY = (e.clientY - centerY) / 10;
-
-      setMousePosition({ x: deltaX, y: deltaY });
-    },
-    []
-  );
-
-  const toggleTheme = useCallback(async () => {
-    if (!buttonRef.current || !mounted) return;
-
-    const isDark = theme === 'dark';
-
-    if (!document.startViewTransition) {
-      setTheme(isDark ? 'light' : 'dark');
-      return;
-    }
-
-    const transition = document.startViewTransition(() => {
-      flushSync(() => {
-        setTheme(isDark ? 'light' : 'dark');
-      });
-    });
-
-    await transition.ready;
-
-    const clipPath = isDark
-      ? ['inset(0 0 100% 0)', 'inset(0 0 0 0)']
-      : ['inset(100% 0 0 0)', 'inset(0 0 0 0)'];
-
-    document.documentElement.animate(
-      {
-        clipPath,
-      },
-      {
-        duration,
-        easing: 'ease-in-out',
-        pseudoElement: '::view-transition-new(root)',
-      }
-    );
-  }, [theme, setTheme, mounted, duration]);
-
-  if (!mounted) {
-    return (
-      <button
-        className={cn(
-          'relative cursor-pointer overflow-visible',
-          'bg-secondary hover:bg-secondary/80',
-          'border-border border',
-          'rounded-md p-2',
-          'transition-colors duration-200',
-          className
-        )}
-        disabled
-      >
-        <div className="flex h-5 w-5 items-center justify-center" />
-        <span className="sr-only">Toggle theme</span>
-      </button>
-    );
-  }
-
-  return (
-    <motion.button
-      ref={buttonRef}
-      onClick={toggleTheme}
-      onMouseMove={handleMouseMove}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => {
-        setIsHovered(false);
-        setMousePosition({ x: 0, y: 0 });
-      }}
-      className={cn(
-        'relative cursor-pointer overflow-visible',
-        'bg-secondary hover:bg-secondary/80',
-        'border-border border',
-        'rounded-md p-2',
-        'transition-colors duration-200',
-        className
-      )}
-      animate={{
-        x: isHovered ? mousePosition.x : 0,
-        y: isHovered ? mousePosition.y : 0,
-      }}
-      transition={{
-        type: 'spring',
-        stiffness: 150,
-        damping: 15,
-        mass: 0.1,
-      }}
-    >
-      <AnimatePresence mode="wait" initial={false}>
-        {theme === 'dark' ? (
-          <motion.div
-            key="moon"
-            initial={{ rotateY: -180, scale: 0 }}
-            animate={{ rotateY: 0, scale: 1 }}
-            exit={{ rotateY: 180, scale: 0 }}
-            transition={{
-              type: 'spring',
-              stiffness: 260,
-              damping: 20,
-            }}
-            className="flex items-center justify-center"
-            style={{ transformStyle: 'preserve-3d' }}
-          >
-            <Moon className="h-5 w-5" />
-          </motion.div>
-        ) : (
-          <motion.div
-            key="sun"
-            initial={{ rotateY: -180, scale: 0 }}
-            animate={{ rotateY: 0, scale: 1 }}
-            exit={{ rotateY: 180, scale: 0 }}
-            transition={{
-              type: 'spring',
-              stiffness: 260,
-              damping: 20,
-            }}
-            className="flex items-center justify-center"
-            style={{ transformStyle: 'preserve-3d' }}
-          >
-            <Sun className="h-5 w-5" />
-          </motion.div>
-        )}
-      </AnimatePresence>
-
-      <span className="sr-only">Toggle theme</span>
-    </motion.button>
-  );
-};

package/template/packages/ui/src/avatar.tsx

@@ -1,53 +0,0 @@
-'use client';
-
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
-import * as React from 'react';
-
-import { cn } from './lib/utils';
-
-function Avatar({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
-  return (
-    <AvatarPrimitive.Root
-      data-slot="avatar"
-      className={cn(
-        'relative flex size-8 shrink-0 overflow-hidden rounded-full',
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function AvatarImage({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
-  return (
-    <AvatarPrimitive.Image
-      data-slot="avatar-image"
-      className={cn('aspect-square size-full', className)}
-      {...props}
-    />
-  );
-}
-
-function AvatarFallback({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
-  return (
-    <AvatarPrimitive.Fallback
-      data-slot="avatar-fallback"
-      className={cn(
-        'bg-muted flex size-full items-center justify-center rounded-full',
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Avatar, AvatarFallback, AvatarImage };

package/template/packages/ui/src/badge.tsx

@@ -1,36 +0,0 @@
-import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-
-import { cn } from './lib/utils';
-
-const badgeVariants = cva(
-  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
-  {
-    variants: {
-      variant: {
-        default:
-          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
-        secondary:
-          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        destructive:
-          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
-        outline: 'text-foreground',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  }
-);
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  );
-}
-
-export { Badge, badgeVariants };