@naeil/ui 0.1.0 → 0.2.0

package/src/components/project-layout.tsx

@@ -1,194 +0,0 @@
-"use client";
-
-import {
-  WorkflowDiagram,
-  type WorkflowNode,
-  type WorkflowEdge,
-} from "@/components/workflow-diagram";
-import { PageTitle, SectionTitle } from "@/components/typography";
-import Image from "next/image";
-
-/* ------------------------------------------------------------------ */
-/*  Types                                                              */
-/* ------------------------------------------------------------------ */
-
-export interface ProjectFeature {
-  icon: string;
-  title: string;
-  description: string;
-}
-
-export interface ProjectStackItem {
-  icon: string;
-  name: string;
-}
-
-export interface ProjectData {
-  icon: string;
-  name: string;
-  description: string;
-  accent: string;
-  tags: string[];
-  github?: string;
-  demo?: string;
-  comingSoon?: boolean;
-  overview?: string;
-  features?: ProjectFeature[];
-  workflow?: {
-    nodes: WorkflowNode[];
-    edges: WorkflowEdge[];
-  };
-  stack?: ProjectStackItem[];
-}
-
-/* ------------------------------------------------------------------ */
-/*  Component                                                          */
-/* ------------------------------------------------------------------ */
-
-export function ProjectLayout({ data }: { data: ProjectData }) {
-  return (
-    <>
-      {/* Hero */}
-      <section className="mx-auto max-w-4xl px-6 pb-16">
-        <div className="flex flex-col-reverse items-start gap-8 md:flex-row md:items-start md:justify-between">
-          {/* Text */}
-          <div className="flex-1">
-            <PageTitle className="mb-3">{data.name}</PageTitle>
-            <p className="text-muted-foreground mb-5 max-w-lg text-lg leading-relaxed">
-              {data.description}
-            </p>
-
-            {/* Tags */}
-            <div className="mb-6 flex flex-wrap gap-2">
-              {data.tags.map((tag) => (
-                <span
-                  key={tag}
-                  className="rounded-full border border-black/[0.08] px-2.5 py-1 text-[11px] text-zinc-400 dark:border-white/[0.08]"
-                >
-                  {tag}
-                </span>
-              ))}
-            </div>
-
-            {/* Links */}
-            <div className="flex flex-wrap items-center gap-3">
-              {data.github && (
-                <a
-                  href={data.github}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="inline-flex items-center gap-2 rounded-lg px-5 py-2.5 text-sm font-medium transition-colors"
-                  style={{
-                    background: data.accent,
-                    color: "var(--background)",
-                  }}
-                >
-                  GitHub →
-                </a>
-              )}
-              {data.demo && (
-                <a
-                  href={data.demo}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-muted-foreground hover:text-foreground inline-flex items-center gap-2 rounded-lg border border-border px-5 py-2.5 text-sm font-medium transition-colors"
-                >
-                  Live Demo
-                </a>
-              )}
-            </div>
-          </div>
-
-          {/* Animal visual */}
-          <div className="flex-shrink-0">
-            <Image
-              src={data.icon}
-              alt=""
-              width={220}
-              height={220}
-              className="animate-float object-contain"
-              style={{
-                filter: `drop-shadow(0 4px 12px color-mix(in oklch, ${data.accent} 15%, transparent))`,
-              }}
-            />
-          </div>
-        </div>
-      </section>
-
-      {/* Coming Soon */}
-      {data.comingSoon && (
-        <section className="mx-auto max-w-4xl px-6 pb-24">
-          <div className="rounded-2xl border border-dashed border-black/[0.08] p-12 text-center dark:border-white/[0.08]">
-            <p className="text-muted-foreground text-sm">
-              Coming Soon
-            </p>
-          </div>
-        </section>
-      )}
-
-      {/* Overview */}
-      {data.overview && (
-        <section className="mx-auto max-w-4xl px-6 pb-16">
-          <SectionTitle className="mb-3">Overview</SectionTitle>
-          <p className="text-muted-foreground max-w-2xl text-sm leading-7 whitespace-pre-line">
-            {data.overview}
-          </p>
-        </section>
-      )}
-
-      {/* Features */}
-      {data.features && data.features.length > 0 && (
-        <section className="mx-auto max-w-4xl px-6 pb-16">
-          <SectionTitle className="mb-6">Features</SectionTitle>
-          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
-            {data.features.map((feat) => (
-              <div
-                key={feat.title}
-                className="rounded-2xl border border-border-subtle bg-surface-subtle p-6 transition-colors hover:border-border-subtle-hover"
-              >
-                <span className="mb-3 block text-2xl">{feat.icon}</span>
-                <h3 className="text-foreground mb-1 text-sm font-semibold">
-                  {feat.title}
-                </h3>
-                <p className="text-muted-foreground text-[13px] leading-relaxed">
-                  {feat.description}
-                </p>
-              </div>
-            ))}
-          </div>
-        </section>
-      )}
-
-      {/* Architecture */}
-      {data.workflow && (
-        <section className="mx-auto max-w-4xl px-6 pb-16">
-          <SectionTitle className="mb-8">Architecture</SectionTitle>
-          <WorkflowDiagram
-            nodes={data.workflow.nodes}
-            edges={data.workflow.edges}
-            accent={data.accent}
-          />
-        </section>
-      )}
-
-      {/* Stack */}
-      {data.stack && data.stack.length > 0 && (
-        <section className="mx-auto max-w-4xl px-6 pb-24">
-          <SectionTitle className="mb-6">Stack</SectionTitle>
-          <div className="flex flex-wrap gap-2">
-            {data.stack.map((item) => (
-              <div
-                key={item.name}
-                className="flex items-center gap-2 rounded-lg border border-border-subtle px-3 py-2 text-[13px]"
-              >
-                <span className="text-base">{item.icon}</span>
-                <span className="text-muted-foreground">{item.name}</span>
-              </div>
-            ))}
-          </div>
-        </section>
-      )}
-
-    </>
-  );
-}

package/src/components/theme-provider.tsx

@@ -1,10 +0,0 @@
-"use client";
-
-import { ThemeProvider as NextThemesProvider } from "next-themes";
-
-export function ThemeProvider({
-  children,
-  ...props
-}: React.ComponentProps<typeof NextThemesProvider>) {
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
-}

package/src/components/theme-toggle-icon.tsx

@@ -1,62 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { useSyncExternalStore } from "react";
-
-const emptySubscribe = () => () => {};
-
-function useIsMounted() {
-  return useSyncExternalStore(
-    emptySubscribe,
-    () => true,
-    () => false,
-  );
-}
-
-export function ThemeToggleIcon() {
-  const { theme, setTheme } = useTheme();
-  const mounted = useIsMounted();
-
-  if (!mounted) {
-    return <div className="h-4 w-4" />;
-  }
-
-  const isDark = theme === "dark";
-
-  return (
-    <button
-      onClick={() => setTheme(isDark ? "light" : "dark")}
-      className="text-muted-foreground hover:text-foreground transition-colors"
-      aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
-    >
-      {isDark ? (
-        <svg
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        >
-          <circle cx="12" cy="12" r="5" />
-          <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
-        </svg>
-      ) : (
-        <svg
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        >
-          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
-        </svg>
-      )}
-    </button>
-  );
-}

package/src/components/theme-toggle.tsx

@@ -1,39 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { useSyncExternalStore } from "react";
-import { Button } from "@/components/ui/button";
-
-const emptySubscribe = () => () => {};
-
-function useIsMounted() {
-  return useSyncExternalStore(
-    emptySubscribe,
-    () => true,
-    () => false
-  );
-}
-
-export function ThemeToggle() {
-  const { theme, setTheme } = useTheme();
-  const mounted = useIsMounted();
-
-  if (!mounted) {
-    return (
-      <Button variant="outline" size="sm" className="w-24">
-        …
-      </Button>
-    );
-  }
-
-  return (
-    <Button
-      variant="outline"
-      size="sm"
-      className="w-24"
-      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
-    >
-      {theme === "dark" ? "☀️ Light" : "🌙 Dark"}
-    </Button>
-  );
-}

package/src/components/typography.tsx

@@ -1,27 +0,0 @@
-import * as React from "react";
-import { cn } from "@/lib/utils";
-
-type HeadingProps = React.HTMLAttributes<HTMLHeadingElement> & {
-  children: React.ReactNode;
-};
-
-export const pageTitleClass =
-  "text-foreground text-4xl font-bold tracking-tight lg:text-5xl";
-
-export const sectionTitleClass = "text-foreground text-lg font-bold";
-
-export function PageTitle({ className, children, ...props }: HeadingProps) {
-  return (
-    <h1 className={cn(pageTitleClass, className)} {...props}>
-      {children}
-    </h1>
-  );
-}
-
-export function SectionTitle({ className, children, ...props }: HeadingProps) {
-  return (
-    <h2 className={cn(sectionTitleClass, className)} {...props}>
-      {children}
-    </h2>
-  );
-}

package/src/components/ui/avatar.tsx

@@ -1,109 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Avatar as AvatarPrimitive } from "radix-ui"
-
-import { cn } from "../../lib/utils"
-
-function Avatar({
-  className,
-  size = "default",
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
-  size?: "default" | "sm" | "lg"
-}) {
-  return (
-    <AvatarPrimitive.Root
-      data-slot="avatar"
-      data-size={size}
-      className={cn(
-        "group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6 focus-visible:ring-accent/25 focus-visible:ring-[2px] focus-visible:outline-none",
-        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-accent/15 text-accent flex size-full items-center justify-center rounded-full font-medium text-xs group-data-[size=sm]/avatar:text-[10px]",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="avatar-badge"
-      className={cn(
-        "bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none",
-        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
-        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
-        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="avatar-group"
-      className={cn(
-        "*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AvatarGroupCount({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="avatar-group-count"
-      className={cn(
-        "bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  Avatar,
-  AvatarImage,
-  AvatarFallback,
-  AvatarBadge,
-  AvatarGroup,
-  AvatarGroupCount,
-}

package/src/components/ui/badge.tsx

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

package/src/components/ui/button.tsx

@@ -1,65 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { Slot } from "radix-ui"
-
-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 duration-150 cursor-pointer active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-accent focus-visible:ring-accent/25 focus-visible:ring-[2px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow-[inset_0_1px_0_0_oklch(1_0_0/0.1)] hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
-        outline:
-          "border border-border-subtle bg-background hover:bg-surface-subtle",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost:
-          "hover:bg-surface-subtle",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-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-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-function Button({
-  className,
-  variant = "default",
-  size = "default",
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }) {
-  const Comp = asChild ? Slot.Root : "button"
-
-  return (
-    <Comp
-      data-slot="button"
-      data-variant={variant}
-      data-size={size}
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-export { Button, buttonVariants }

package/src/components/ui/card.tsx

@@ -1,106 +0,0 @@
-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 border-border-subtle py-6 transition-colors duration-150",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardElevated({ 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 border-border-subtle py-6 shadow-sm dark:bg-[oklch(0.18_0_0)] transition-colors duration-150", // ok-hardcoded
-        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,
-  CardElevated,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-}