@naeil/ui 0.1.0 → 0.2.0

package/package.json

@@ -1,7 +1,24 @@
 {
   "name": "@naeil/ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
+  "type": "module",
+  "license": "MIT",
+  "sideEffects": false,
   "exports": {
+    ".": {
+      "import": "./dist/components/index.js",
+      "types": "./dist/components/index.d.ts"
+    },
+    "./ui": {
+      "import": "./dist/components/ui/index.js",
+      "types": "./dist/components/ui/index.d.ts"
+    },
+    "./utils": {
+      "import": "./dist/lib/utils.js",
+      "types": "./dist/lib/utils.d.ts"
+    },
+    "./theme.css": "./src/styles/theme.css",
+    "./globals.css": "./src/app/globals.css",
     "./components/*": "./src/components/*.tsx",
     "./lib/*": "./src/lib/*.ts",
     "./i18n/*": "./src/i18n/*.ts"
@@ -9,11 +26,21 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
+    "build:pkg": "tsup",
     "start": "next start",
     "lint": "eslint",
+    "test": "vitest run",
     "build:tokens": "tsx scripts/build-tokens.ts",
     "check:contrast": "tsx scripts/check-contrast.ts"
   },
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19",
+    "next": "^15 || ^16",
+    "next-intl": "^4",
+    "next-themes": "^0.4",
+    "tailwind-merge": "^3"
+  },
   "dependencies": {
     "@react-three/drei": "^10.7.7",
     "@react-three/fiber": "^9.5.0",
@@ -22,7 +49,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.575.0",
-    "next": "16.1.6",
+    "next": "16.1.7",
     "next-intl": "^4.8.3",
     "next-themes": "^0.4.6",
     "pretendard": "^1.3.9",
@@ -34,22 +61,31 @@
     "three": "^0.183.2"
   },
   "devDependencies": {
+    "@axe-core/react": "^4.11.1",
     "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@types/three": "^0.183.1",
     "eslint": "^9",
-    "eslint-config-next": "16.1.6",
+    "eslint-config-next": "16.1.7",
     "eslint-config-prettier": "^10.1.8",
     "prettier": "^3.8.1",
     "shadcn": "^3.8.5",
     "style-dictionary": "^4.4.0",
     "tailwindcss": "^4",
+    "tsup": "^8.5.1",
     "tsx": "^4.21.0",
     "tw-animate-css": "^1.4.0",
-    "typescript": "^5"
+    "typescript": "^5",
+    "vitest": "^4.1.0"
   },
+  "files": [
+    "dist/",
+    "src/styles/",
+    "src/app/globals.css",
+    "messages/"
+  ],
   "pnpm": {
     "onlyBuiltDependencies": [
       "esbuild",
@@ -57,17 +93,22 @@
       "@bundled-es-modules/glob"
     ]
   },
-  "files": [
-    "src/",
-    "messages/",
-    "tailwind.config.*",
-    "postcss.config.*"
-  ],
   "publishConfig": {
     "access": "public"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/naeil-dev/design-system"
-  }
+  },
+  "description": "Design system for naeil.dev — React components, design tokens, and i18n support built with Next.js, Radix UI, and Tailwind CSS.",
+  "keywords": [
+    "design-system",
+    "react",
+    "components",
+    "tailwindcss",
+    "radix-ui",
+    "next.js",
+    "i18n"
+  ],
+  "homepage": "https://naeil.dev"
 }

package/src/app/globals.css

@@ -1,7 +1,7 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";
-@import "../../dist/theme.css";
+@import "../styles/theme.css";
 
 @custom-variant dark (&:is(.dark *));
 

package/src/styles/theme.css

@@ -0,0 +1,206 @@
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-elevated: var(--card-elevated);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-border-subtle: var(--border-subtle);
+  --color-border-subtle-hover: var(--border-subtle-hover);
+  --color-surface-subtle: var(--surface-subtle);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --color-project-cc: var(--project-cc);
+  --color-project-sa: var(--project-sa);
+  --color-project-pkm: var(--project-pkm);
+  --color-project-naeilUi: var(--project-naeilUi);
+  --color-project-baby: var(--project-baby);
+
+  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Geist Mono', ui-monospace, monospace;
+
+  --radius-none: var(--radius-none-value);
+  --radius-sm: var(--radius-sm-value);
+  --radius-md: var(--radius-md-value);
+  --radius-lg: var(--radius-lg-value);
+
+  --spacing-0: var(--spacing-0-value);
+  --spacing-1: var(--spacing-1-value);
+  --spacing-2: var(--spacing-2-value);
+  --spacing-3: var(--spacing-3-value);
+  --spacing-4: var(--spacing-4-value);
+  --spacing-5: var(--spacing-5-value);
+  --spacing-6: var(--spacing-6-value);
+  --spacing-8: var(--spacing-8-value);
+  --spacing-10: var(--spacing-10-value);
+  --spacing-12: var(--spacing-12-value);
+  --spacing-16: var(--spacing-16-value);
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-elevated: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.970 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.970 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.970 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.922 0 0);
+  --border-subtle: oklch(0 0 0 / 6%);
+  --border-subtle-hover: oklch(0 0 0 / 12%);
+  --surface-subtle: oklch(0 0 0 / 2%);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.970 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+
+  --project-cc: oklch(0.704 0.140 181);
+  --project-sa: oklch(0.723 0.219 149);
+  --project-pkm: oklch(0.627 0.265 303);
+  --project-naeilUi: oklch(0.623 0.214 259);
+  --project-baby: oklch(0.769 0.188 70.08);
+
+  --radius-none-value: 0px;
+  --radius-sm-value: 2px;
+  --radius-md-value: 4px;
+  --radius-lg-value: 8px;
+
+  --spacing-0-value: 0px;
+  --spacing-1-value: 4px;
+  --spacing-2-value: 8px;
+  --spacing-3-value: 12px;
+  --spacing-4-value: 16px;
+  --spacing-5-value: 20px;
+  --spacing-6-value: 24px;
+  --spacing-8-value: 32px;
+  --spacing-10-value: 40px;
+  --spacing-12-value: 48px;
+  --spacing-16-value: 64px;
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-elevated: oklch(0.18 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --border-subtle: oklch(1 0 0 / 6%);
+  --border-subtle-hover: oklch(1 0 0 / 12%);
+  --surface-subtle: oklch(1 0 0 / 3%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) {
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.205 0 0);
+    --card-elevated: oklch(0.18 0 0);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.205 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.922 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.269 0 0);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+    --accent: oklch(0.269 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.577 0.245 27.325);
+    --destructive-foreground: oklch(0.985 0 0);
+    --border: oklch(1 0 0 / 10%);
+    --border-subtle: oklch(1 0 0 / 6%);
+    --border-subtle-hover: oklch(1 0 0 / 12%);
+    --surface-subtle: oklch(1 0 0 / 3%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.556 0 0);
+    --chart-1: oklch(0.488 0.243 264.376);
+    --chart-2: oklch(0.696 0.17 162.48);
+    --chart-3: oklch(0.769 0.188 70.08);
+    --chart-4: oklch(0.627 0.265 303.9);
+    --chart-5: oklch(0.645 0.246 16.439);
+    --sidebar: oklch(0.205 0 0);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.556 0 0);
+  }
+}

package/postcss.config.mjs

@@ -1,7 +0,0 @@
-const config = {
-  plugins: {
-    "@tailwindcss/postcss": {},
-  },
-};
-
-export default config;

package/src/app/[locale]/(content)/baby-agent/page.tsx

@@ -1,30 +0,0 @@
-import { setRequestLocale } from "next-intl/server";
-import { useTranslations } from "next-intl";
-import { ProjectLayout } from "@/components/project-layout";
-import type { ProjectData } from "@/components/project-layout";
-
-export default async function BabyAgentPage({
-  params,
-}: {
-  params: Promise<{ locale: string }>;
-}) {
-  const { locale } = await params;
-  setRequestLocale(locale);
-
-  return <BabyAgentContent />;
-}
-
-function BabyAgentContent() {
-  const t = useTranslations("babyAgent");
-
-  const data: ProjectData = {
-    icon: "/images/turtle.png",
-    name: t("name"),
-    description: t("description"),
-    accent: "oklch(0.769 0.188 70.08)",
-    tags: ["OpenClaw", "LINE", "AI Agent"],
-    comingSoon: true,
-  };
-
-  return <ProjectLayout data={data} />;
-}

package/src/app/[locale]/(content)/blog/page.tsx

@@ -1,68 +0,0 @@
-import { setRequestLocale } from "next-intl/server";
-import { useTranslations } from "next-intl";
-import { PageTitle } from "@/components/typography";
-import Image from "next/image";
-
-export default async function BlogPage({
-  params,
-}: {
-  params: Promise<{ locale: string }>;
-}) {
-  const { locale } = await params;
-  setRequestLocale(locale);
-
-  return <BlogContent />;
-}
-
-function BlogContent() {
-  const t = useTranslations("blogPage");
-
-  return (
-    <>
-      <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">
-          <div className="flex-1">
-            <PageTitle className="mb-3">{t("title")}</PageTitle>
-            <p className="text-muted-foreground mb-5 max-w-lg text-lg leading-relaxed">
-              {t("subtitle")}
-            </p>
-            <div className="mb-6 flex flex-wrap gap-2">
-              {[
-                "Deep Dive",
-                "Research",
-                "Build Logs",
-              ].map((tag) => (
-                <span
-                  key={tag}
-                  className="rounded-full border border-border-subtle px-2.5 py-1 text-[11px] text-zinc-400"
-                >
-                  {tag}
-                </span>
-              ))}
-            </div>
-          </div>
-
-          <div className="flex-shrink-0">
-            <Image
-              src="/images/diver.png"
-              alt=""
-              width={220}
-              height={220}
-              className="animate-float object-contain"
-              style={{
-                filter:
-                  "drop-shadow(0 4px 12px color-mix(in oklch, var(--project-naeilUi) 15%, transparent))",
-              }}
-            />
-          </div>
-        </div>
-      </section>
-
-      <section className="mx-auto max-w-4xl px-6 pb-24">
-        <div className="rounded-2xl border border-dashed border-border-subtle p-12 text-center">
-          <p className="text-muted-foreground text-sm">{t("comingSoon")}</p>
-        </div>
-      </section>
-    </>
-  );
-}

package/src/app/[locale]/(content)/cc/page.tsx

@@ -1,216 +0,0 @@
-import { setRequestLocale } from "next-intl/server";
-import { useTranslations } from "next-intl";
-import { ProjectLayout } from "@/components/project-layout";
-import type { ProjectData } from "@/components/project-layout";
-
-export default async function CCPage({
-  params,
-}: {
-  params: Promise<{ locale: string }>;
-}) {
-  const { locale } = await params;
-  setRequestLocale(locale);
-
-  return <CCContent />;
-}
-
-function CCContent() {
-  const t = useTranslations("cc");
-
-  const data: ProjectData = {
-    icon: "/images/coral.png",
-    name: t("name"),
-    description: t("description"),
-    accent: "oklch(0.704 0.140 181)",
-    tags: ["Python", "PostgreSQL", "Ollama", "Gemini", "LINE"],
-    github: "https://github.com/naeil-dev/content-collector",
-
-    overview: t("overview"),
-
-    features: [
-      {
-        icon: "📡",
-        title: t("features.collect.title"),
-        description: t("features.collect.desc"),
-      },
-      {
-        icon: "🤖",
-        title: t("features.classify.title"),
-        description: t("features.classify.desc"),
-      },
-      {
-        icon: "🧲",
-        title: t("features.embed.title"),
-        description: t("features.embed.desc"),
-      },
-      {
-        icon: "📊",
-        title: t("features.digest.title"),
-        description: t("features.digest.desc"),
-      },
-      {
-        icon: "⚡",
-        title: t("features.zeroCost.title"),
-        description: t("features.zeroCost.desc"),
-      },
-      {
-        icon: "🔔",
-        title: t("features.alerts.title"),
-        description: t("features.alerts.desc"),
-      },
-    ],
-
-    workflow: {
-      nodes: [
-        {
-          id: "github",
-          label: "GitHub RSS",
-          type: "source",
-          position: { x: 20, y: 5 },
-          detail: {
-            description: t("workflow.github.desc"),
-            tech: ["feedparser", "httpx"],
-            meta: t("workflow.github.meta"),
-          },
-        },
-        {
-          id: "reddit",
-          label: "Reddit",
-          type: "source",
-          position: { x: 50, y: 5 },
-          detail: {
-            description: t("workflow.reddit.desc"),
-            tech: ["RSS", "JSON API"],
-            meta: t("workflow.reddit.meta"),
-          },
-        },
-        {
-          id: "threads",
-          label: "Threads",
-          type: "source",
-          position: { x: 80, y: 5 },
-          detail: {
-            description: t("workflow.threads.desc"),
-            tech: ["Playwright", "httpx"],
-            meta: t("workflow.threads.meta"),
-          },
-        },
-        {
-          id: "collector",
-          label: "Collector",
-          type: "process",
-          position: { x: 50, y: 22 },
-          detail: {
-            description: t("workflow.collector.desc"),
-            tech: ["Python", "LaunchAgent"],
-            meta: t("workflow.collector.meta"),
-          },
-        },
-        {
-          id: "postgres",
-          label: "PostgreSQL",
-          type: "storage",
-          position: { x: 50, y: 38 },
-          detail: {
-            description: t("workflow.postgres.desc"),
-            tech: ["PostgreSQL 17", "pgvector", "Docker"],
-          },
-        },
-        {
-          id: "embed",
-          label: "BGE-M3",
-          type: "ai",
-          position: { x: 25, y: 53 },
-          detail: {
-            description: t("workflow.embed.desc"),
-            tech: ["Ollama", "BGE-M3"],
-            meta: t("workflow.embed.meta"),
-          },
-        },
-        {
-          id: "classify",
-          label: "Qwen3 14B",
-          type: "ai",
-          position: { x: 75, y: 53 },
-          detail: {
-            description: t("workflow.classify.desc"),
-            tech: ["Ollama", "Qwen3 14B"],
-            meta: t("workflow.classify.meta"),
-          },
-        },
-        {
-          id: "cluster",
-          label: "Cluster + Score",
-          type: "process",
-          position: { x: 50, y: 68 },
-          detail: {
-            description: t("workflow.cluster.desc"),
-            tech: ["pgvector", "cosine similarity"],
-          },
-        },
-        {
-          id: "digest",
-          label: "Gemini Flash",
-          type: "ai",
-          position: { x: 50, y: 82 },
-          detail: {
-            description: t("workflow.digest.desc"),
-            tech: ["Gemini 2.5 Flash", "Jinja2"],
-            meta: t("workflow.digest.meta"),
-          },
-        },
-        {
-          id: "line",
-          label: "LINE Summary",
-          type: "output",
-          position: { x: 30, y: 95 },
-          detail: {
-            description: t("workflow.line.desc"),
-            tech: ["LINE Push API"],
-          },
-        },
-        {
-          id: "html",
-          label: "HTML Digest",
-          type: "output",
-          position: { x: 70, y: 95 },
-          detail: {
-            description: t("workflow.html.desc"),
-            tech: ["Jinja2", "HTML"],
-            meta: "digest.naeil.dev",
-          },
-        },
-      ],
-      edges: [
-        { from: "github", to: "collector" },
-        { from: "reddit", to: "collector" },
-        { from: "threads", to: "collector" },
-        { from: "collector", to: "postgres" },
-        { from: "postgres", to: "embed" },
-        { from: "postgres", to: "classify" },
-        { from: "embed", to: "cluster" },
-        { from: "classify", to: "cluster" },
-        { from: "cluster", to: "digest" },
-        { from: "digest", to: "line" },
-        { from: "digest", to: "html" },
-      ],
-    },
-
-    stack: [
-      { icon: "🐍", name: "Python 3.12" },
-      { icon: "🐘", name: "PostgreSQL 17" },
-      { icon: "🧮", name: "pgvector" },
-      { icon: "🦙", name: "Ollama" },
-      { icon: "🤖", name: "Qwen3 14B" },
-      { icon: "🔤", name: "BGE-M3" },
-      { icon: "✨", name: "Gemini 2.5 Flash" },
-      { icon: "📱", name: "LINE API" },
-      { icon: "🤖", name: "Telegram Bot API" },
-      { icon: "🐳", name: "Docker Compose" },
-      { icon: "⏰", name: "LaunchAgent" },
-      { icon: "🎭", name: "Playwright" },
-    ],
-  };
-
-  return <ProjectLayout data={data} />;
-}