@shipsite.dev/components 0.1.0 → 0.2.0

package/src/ui/button.tsx

@@ -0,0 +1,60 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default:
+          "text-primary-foreground shadow-sm dark:hover:from-primary/80 hover:from-primary/70 dark:hover:to-primary/70 hover:to-primary/90 bg-linear-to-b from-primary/60 to-primary/100 dark:from-primary/100 dark:to-primary/70 border-t-primary",
+        destructive:
+          "bg-destructive/30 text-destructive-foreground shadow-xs hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
+        glow: "glass-4 hover:glass-5 shadow-md",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-foreground underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        xs: "h-7 rounded-md px-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-5",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

package/src/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 rounded-xl border shadow-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn("flex flex-col space-y-1.5 p-6", className)}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"h3">) {
+  return (
+    <h3
+      data-slot="card-title"
+      className={cn("leading-none font-semibold tracking-tight", className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("p-6 pt-0", className)}
+      {...props}
+    />
+  );
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center p-6 pt-0", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+};

package/src/ui/footer.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+function FooterRoot({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="footer"
+      className={cn("bg-background text-foreground pt-12 pb-4", className)}
+      {...props}
+    />
+  );
+}
+
+function FooterContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="footer-content"
+      className={cn(
+        "grid grid-cols-2 gap-8 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FooterColumn({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="footer-column"
+      className={cn("flex flex-col gap-4", className)}
+      {...props}
+    />
+  );
+}
+
+function FooterBottom({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="footer-bottom"
+      className={cn(
+        "border-border dark:border-border/15 text-muted-foreground mt-8 flex flex-col items-center justify-between gap-4 border-t pt-4 text-xs sm:flex-row",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { FooterRoot, FooterBottom, FooterColumn, FooterContent };

package/src/ui/glow.tsx

@@ -0,0 +1,48 @@
+import { cva, VariantProps } from "class-variance-authority";
+import React from "react";
+
+import { cn } from "../lib/utils";
+
+const glowVariants = cva("absolute w-full", {
+  variants: {
+    variant: {
+      top: "top-0",
+      above: "-top-[128px]",
+      bottom: "bottom-0",
+      below: "-bottom-[128px]",
+      center: "top-[50%]",
+    },
+  },
+  defaultVariants: {
+    variant: "top",
+  },
+});
+
+function Glow({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof glowVariants>) {
+  return (
+    <div
+      data-slot="glow"
+      className={cn(glowVariants({ variant }), className)}
+      {...props}
+    >
+      <div
+        className={cn(
+          "from-brand-foreground/50 to-brand-foreground/0 absolute left-1/2 h-[256px] w-[60%] -translate-x-1/2 scale-[2.5] rounded-[50%] bg-radial from-10% to-60% opacity-20 sm:h-[512px] dark:opacity-100",
+          variant === "center" && "-translate-y-1/2",
+        )}
+      />
+      <div
+        className={cn(
+          "from-brand/30 to-brand-foreground/0 absolute left-1/2 h-[128px] w-[40%] -translate-x-1/2 scale-200 rounded-[50%] bg-radial from-10% to-60% opacity-20 sm:h-[256px] dark:opacity-100",
+          variant === "center" && "-translate-y-1/2",
+        )}
+      />
+    </div>
+  );
+}
+
+export default Glow;

package/src/ui/item.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+function Item({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item"
+      className={cn("text-foreground flex flex-col gap-4 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<"h3">) {
+  return (
+    <h3
+      data-slot="item-title"
+      className={cn(
+        "text-sm leading-none font-semibold tracking-tight sm:text-base",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-description"
+      className={cn(
+        "text-muted-foreground flex max-w-[240px] flex-col gap-2 text-sm text-balance",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ItemIcon({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-icon"
+      className={cn("flex items-center self-start", className)}
+      {...props}
+    />
+  );
+}
+
+export { Item, ItemDescription, ItemIcon, ItemTitle };

package/src/ui/mockup.tsx

@@ -0,0 +1,64 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import React from "react";
+
+import { cn } from "../lib/utils";
+
+const mockupVariants = cva(
+  "flex relative z-10 overflow-hidden shadow-2xl border border-border/70 dark:border-border/5 dark:border-t-border/15",
+  {
+    variants: {
+      type: {
+        mobile: "rounded-[48px] max-w-[350px]",
+        responsive: "rounded-md",
+      },
+    },
+    defaultVariants: {
+      type: "responsive",
+    },
+  },
+);
+
+export interface MockupProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof mockupVariants> {}
+
+function Mockup({ className, type, ...props }: MockupProps) {
+  return (
+    <div
+      data-slot="mockup"
+      className={cn(mockupVariants({ type, className }))}
+      {...props}
+    />
+  );
+}
+
+const frameVariants = cva(
+  "bg-border/50 flex relative z-10 overflow-hidden rounded-2xl dark:bg-border/10",
+  {
+    variants: {
+      size: {
+        small: "p-2",
+        large: "p-4",
+      },
+    },
+    defaultVariants: {
+      size: "small",
+    },
+  },
+);
+
+export interface MockupFrameProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof frameVariants> {}
+
+function MockupFrame({ className, size, ...props }: MockupFrameProps) {
+  return (
+    <div
+      data-slot="mockup-frame"
+      className={cn(frameVariants({ size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Mockup, MockupFrame };

package/src/ui/navbar.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+function Navbar({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      data-slot="navbar"
+      className={cn("flex items-center justify-between py-4", className)}
+      {...props}
+    />
+  );
+}
+
+function NavbarLeft({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      data-slot="navbar-left"
+      className={cn("flex items-center justify-start gap-4", className)}
+      {...props}
+    />
+  );
+}
+
+function NavbarRight({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      data-slot="navbar-right"
+      className={cn("flex items-center justify-end gap-4", className)}
+      {...props}
+    />
+  );
+}
+
+function NavbarCenter({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      data-slot="navbar-center"
+      className={cn("flex items-center justify-center gap-4", className)}
+      {...props}
+    />
+  );
+}
+
+export { Navbar, NavbarCenter, NavbarLeft, NavbarRight };

package/src/ui/section.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+function Section({ className, ...props }: React.ComponentProps<"section">) {
+  return (
+    <section
+      data-slot="section"
+      className={cn("line-b px-4 py-12 sm:py-24 md:py-32", className)}
+      {...props}
+    />
+  );
+}
+
+export { Section };

package/src/ui/sheet.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+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(
+        "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}
+    />
+  );
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left";
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "border-border dark:border-border/15 bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 gap-4 p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 border-t",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-6 right-6 z-[100] rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+          <XIcon className="size-5" />
+          <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-2 text-center sm:text-left",
+        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-foreground text-lg font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+};

package/src/ui/theme-toggle.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { Moon, Sun, Monitor } from 'lucide-react';
+import { useTheme } from 'next-themes';
+import { cn } from '../lib/utils';
+
+export function ThemeToggle({ className }: { className?: string }) {
+  const [mounted, setMounted] = useState(false);
+  const { theme, setTheme } = useTheme();
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return null;
+
+  return (
+    <div className={cn('flex items-center gap-0.5 rounded-full border border-border p-0.5', className)}>
+      <button
+        onClick={() => setTheme('light')}
+        className={cn(
+          'rounded-full p-1.5 transition-colors',
+          theme === 'light' ? 'bg-muted text-foreground' : 'text-muted-foreground hover:text-foreground',
+        )}
+        aria-label="Light theme"
+      >
+        <Sun className="size-3.5" />
+      </button>
+      <button
+        onClick={() => setTheme('system')}
+        className={cn(
+          'rounded-full p-1.5 transition-colors',
+          theme === 'system' ? 'bg-muted text-foreground' : 'text-muted-foreground hover:text-foreground',
+        )}
+        aria-label="System theme"
+      >
+        <Monitor className="size-3.5" />
+      </button>
+      <button
+        onClick={() => setTheme('dark')}
+        className={cn(
+          'rounded-full p-1.5 transition-colors',
+          theme === 'dark' ? 'bg-muted text-foreground' : 'text-muted-foreground hover:text-foreground',
+        )}
+        aria-label="Dark theme"
+      >
+        <Moon className="size-3.5" />
+      </button>
+    </div>
+  );
+}