@naeil/ui 0.2.0 → 0.4.0

package/package.json

@@ -1,68 +1,185 @@
 {
   "name": "@naeil/ui",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "type": "module",
   "license": "MIT",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "exports": {
     ".": {
-      "import": "./dist/components/index.js",
-      "types": "./dist/components/index.d.ts"
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.js"
     },
     "./ui": {
-      "import": "./dist/components/ui/index.js",
-      "types": "./dist/components/ui/index.d.ts"
+      "types": "./dist/components/ui/index.d.ts",
+      "import": "./dist/components/ui/index.js"
     },
     "./utils": {
-      "import": "./dist/lib/utils.js",
-      "types": "./dist/lib/utils.d.ts"
+      "types": "./dist/lib/utils.d.ts",
+      "import": "./dist/lib/utils.js"
     },
     "./theme.css": "./src/styles/theme.css",
-    "./globals.css": "./src/app/globals.css",
-    "./components/*": "./src/components/*.tsx",
-    "./lib/*": "./src/lib/*.ts",
-    "./i18n/*": "./src/i18n/*.ts"
+    "./globals.css": "./src/styles/globals.css",
+    "./components.css": "./src/styles/components.css",
+    "./components/index": {
+      "types": "./dist/source/components/index.d.ts",
+      "import": "./dist/source/components/index.js"
+    },
+    "./components/ui/index": {
+      "types": "./dist/source/components/ui/index.d.ts",
+      "import": "./dist/source/components/ui/index.js"
+    },
+    "./components/ui/avatar": {
+      "types": "./dist/source/components/ui/avatar.d.ts",
+      "import": "./dist/source/components/ui/avatar.js"
+    },
+    "./components/ui/badge": {
+      "types": "./dist/source/components/ui/badge.d.ts",
+      "import": "./dist/source/components/ui/badge.js"
+    },
+    "./components/ui/button": {
+      "types": "./dist/source/components/ui/button.d.ts",
+      "import": "./dist/source/components/ui/button.js"
+    },
+    "./components/ui/card": {
+      "types": "./dist/source/components/ui/card.d.ts",
+      "import": "./dist/source/components/ui/card.js"
+    },
+    "./components/ui/checkbox": {
+      "types": "./dist/source/components/ui/checkbox.d.ts",
+      "import": "./dist/source/components/ui/checkbox.js"
+    },
+    "./components/ui/dialog": {
+      "types": "./dist/source/components/ui/dialog.d.ts",
+      "import": "./dist/source/components/ui/dialog.js"
+    },
+    "./components/ui/dropdown-menu": {
+      "types": "./dist/source/components/ui/dropdown-menu.d.ts",
+      "import": "./dist/source/components/ui/dropdown-menu.js"
+    },
+    "./components/ui/input": {
+      "types": "./dist/source/components/ui/input.d.ts",
+      "import": "./dist/source/components/ui/input.js"
+    },
+    "./components/ui/select": {
+      "types": "./dist/source/components/ui/select.d.ts",
+      "import": "./dist/source/components/ui/select.js"
+    },
+    "./components/ui/sonner": {
+      "types": "./dist/source/components/ui/sonner.d.ts",
+      "import": "./dist/source/components/ui/sonner.js"
+    },
+    "./components/ui/switch": {
+      "types": "./dist/source/components/ui/switch.d.ts",
+      "import": "./dist/source/components/ui/switch.js"
+    },
+    "./components/nav": {
+      "types": "./dist/source/components/nav.d.ts",
+      "import": "./dist/source/components/nav.js"
+    },
+    "./components/footer": {
+      "types": "./dist/source/components/footer.d.ts",
+      "import": "./dist/source/components/footer.js"
+    },
+    "./components/logo": {
+      "types": "./dist/source/components/logo.d.ts",
+      "import": "./dist/source/components/logo.js"
+    },
+    "./components/locale-switcher": {
+      "types": "./dist/source/components/locale-switcher.d.ts",
+      "import": "./dist/source/components/locale-switcher.js"
+    },
+    "./components/theme-provider": {
+      "types": "./dist/source/components/theme-provider.d.ts",
+      "import": "./dist/source/components/theme-provider.js"
+    },
+    "./components/theme-toggle": {
+      "types": "./dist/source/components/theme-toggle.d.ts",
+      "import": "./dist/source/components/theme-toggle.js"
+    },
+    "./components/theme-toggle-icon": {
+      "types": "./dist/source/components/theme-toggle-icon.d.ts",
+      "import": "./dist/source/components/theme-toggle-icon.js"
+    },
+    "./components/typography": {
+      "types": "./dist/source/components/typography.d.ts",
+      "import": "./dist/source/components/typography.js"
+    },
+    "./lib/utils": {
+      "types": "./dist/source/lib/utils.d.ts",
+      "import": "./dist/source/lib/utils.js"
+    },
+    "./i18n/config": {
+      "types": "./dist/source/i18n/config.d.ts",
+      "import": "./dist/source/i18n/config.js"
+    },
+    "./i18n/routing": {
+      "types": "./dist/source/i18n/routing.d.ts",
+      "import": "./dist/source/i18n/routing.js"
+    },
+    "./components/ui/tabs": {
+      "types": "./dist/source/components/ui/tabs.d.ts",
+      "import": "./dist/source/components/ui/tabs.js"
+    },
+    "./components/ui/textarea": {
+      "types": "./dist/source/components/ui/textarea.d.ts",
+      "import": "./dist/source/components/ui/textarea.js"
+    }
   },
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "build:pkg": "tsup",
+    "build:pkg": "pnpm check:brand && tsup && tsup --config tsup.deep.config.ts && tsx scripts/fix-deep-imports.ts && pnpm build:tokens",
     "start": "next start",
     "lint": "eslint",
     "test": "vitest run",
+    "storybook": "tsx scripts/prepare-storybook.ts && storybook dev -p 6006",
+    "build:storybook": "pnpm check:brand && tsx scripts/prepare-storybook.ts && storybook build && tsx scripts/check-storybook.ts",
     "build:tokens": "tsx scripts/build-tokens.ts",
-    "check:contrast": "tsx scripts/check-contrast.ts"
+    "check:contrast": "tsx scripts/check-contrast.ts",
+    "test:browser": "playwright test",
+    "check:package": "tsx scripts/check-package.ts && tsx scripts/check-consumers.ts",
+    "check:types": "tsc --noEmit",
+    "check:package:boundary": "tsx scripts/check-package.ts",
+    "check:consumers": "tsx scripts/check-consumers.ts",
+    "preview:storybook": "tsx scripts/serve-storybook.ts",
+    "build:brand": "tsx scripts/build-brand.ts",
+    "check:brand": "tsx scripts/build-brand.ts --check"
   },
   "peerDependencies": {
-    "react": "^19",
-    "react-dom": "^19",
     "next": "^15 || ^16",
     "next-intl": "^4",
-    "next-themes": "^0.4",
-    "tailwind-merge": "^3"
+    "react": "^19",
+    "react-dom": "^19"
   },
   "dependencies": {
-    "@react-three/drei": "^10.7.7",
-    "@react-three/fiber": "^9.5.0",
-    "@supabase/ssr": "^0.9.0",
-    "@supabase/supabase-js": "^2.98.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.575.0",
-    "next": "16.1.7",
-    "next-intl": "^4.8.3",
     "next-themes": "^0.4.6",
-    "pretendard": "^1.3.9",
     "radix-ui": "^1.4.3",
-    "react": "19.2.3",
-    "react-dom": "19.2.3",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
-    "three": "^0.183.2"
+    "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.13.0",
     "@axe-core/react": "^4.11.1",
+    "@fontsource/noto-sans-jp": "^5.3.0",
+    "@mdx-js/loader": "^3.1.1",
+    "@mdx-js/react": "^3.1.1",
+    "@next/mdx": "^16.2.1",
+    "@playwright/test": "^1.63.0",
+    "@react-three/drei": "^10.7.7",
+    "@react-three/fiber": "^9.6.1",
+    "@storybook/addon-a11y": "10.4.6",
+    "@storybook/addon-docs": "10.4.6",
+    "@storybook/nextjs-vite": "10.4.6",
+    "@supabase/ssr": "^0.9.0",
+    "@supabase/supabase-js": "^2.98.0",
     "@tailwindcss/postcss": "^4",
+    "@types/mdx": "^2.0.13",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
@@ -70,21 +187,42 @@
     "eslint": "^9",
     "eslint-config-next": "16.1.7",
     "eslint-config-prettier": "^10.1.8",
+    "gray-matter": "^4.0.3",
+    "next": "16.1.7",
+    "next-intl": "^4.8.3",
+    "pretendard": "^1.3.9",
     "prettier": "^3.8.1",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "reading-time": "^1.5.0",
+    "remark": "^15.0.1",
+    "remark-html": "^16.0.1",
     "shadcn": "^3.8.5",
+    "storybook": "10.4.6",
     "style-dictionary": "^4.4.0",
     "tailwindcss": "^4",
+    "three": "^0.183.2",
     "tsup": "^8.5.1",
     "tsx": "^4.21.0",
-    "tw-animate-css": "^1.4.0",
     "typescript": "^5",
     "vitest": "^4.1.0"
   },
   "files": [
     "dist/",
     "src/styles/",
-    "src/app/globals.css",
-    "messages/"
+    "DESIGN.md",
+    "docs/design/v2-migration.md",
+    "docs/package-release.md",
+    "CHANGELOG.md",
+    "THIRD_PARTY_NOTICES.md",
+    "licenses/",
+    "docs/components/",
+    "docs/design/public-ui-support.md",
+    "docs/design/public-ui-stage3-verification.md",
+    "docs/design/component-demand.md",
+    "docs/design/public-ui-stage4-verification.md",
+    "docs/design/public-ui-final-verification.md",
+    "docs/design/public-ui-release-validation.md"
   ],
   "pnpm": {
     "onlyBuiltDependencies": [
@@ -98,9 +236,9 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/naeil-dev/design-system"
+    "url": "git+https://github.com/naeil-dev/naeil-ui.git"
   },
-  "description": "Design system for naeil.dev — React components, design tokens, and i18n support built with Next.js, Radix UI, and Tailwind CSS.",
+  "description": "React UI components, semantic design tokens and shared styles; optional Next.js brand compatibility components.",
   "keywords": [
     "design-system",
     "react",
@@ -110,5 +248,17 @@
     "next.js",
     "i18n"
   ],
-  "homepage": "https://naeil.dev"
+  "homepage": "https://github.com/naeil-dev/naeil-ui#readme",
+  "bugs": {
+    "url": "https://github.com/naeil-dev/naeil-ui/issues"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    },
+    "next-intl": {
+      "optional": true
+    }
+  },
+  "packageManager": "pnpm@10.30.3"
 }

package/src/styles/components.css

@@ -0,0 +1,276 @@
+@layer components {
+  .ui-textarea {
+    min-height: var(--ui-control-height);
+    font-size: var(--text-base);
+    line-height: var(--leading-normal);
+    padding-block: var(--spacing-2-value);
+    transition:
+      color var(--ui-motion-fast),
+      background-color var(--ui-motion-fast),
+      border-color var(--ui-motion-fast);
+  }
+  .ui-textarea[aria-invalid="true"] {
+    border-color: var(--error);
+  }
+  .ui-textarea::placeholder {
+    color: var(--muted-foreground);
+    opacity: 1;
+  }
+  .ui-tabs {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-3-value);
+  }
+  .ui-tabs[data-orientation="vertical"] {
+    flex-direction: row;
+  }
+  .ui-tabs-list {
+    display: flex;
+    align-items: flex-start;
+    max-width: 100%;
+    min-width: 0;
+    gap: var(--spacing-2-value);
+    padding: var(--spacing-2-value);
+    overflow-x: auto;
+  }
+  .ui-tabs-list[aria-orientation="vertical"] {
+    flex-direction: column;
+    flex-shrink: 0;
+    align-self: flex-start;
+  }
+  .ui-tabs-trigger {
+    color: var(--foreground);
+    border-bottom-color: transparent;
+  }
+  .ui-tabs-trigger:hover:not(:disabled) {
+    background-color: var(--surface-subtle);
+  }
+  .ui-tabs-trigger[data-state="active"] {
+    background-color: var(--surface-selected);
+    border-bottom-color: var(--primary);
+  }
+  .ui-focus:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 3px;
+  }
+  .ui-control {
+    height: var(--ui-control-height);
+    font-size: var(--text-base);
+    line-height: var(--leading-normal);
+    border-radius: var(--radius-md-value);
+    transition:
+      color var(--ui-motion-fast),
+      background-color var(--ui-motion-fast),
+      border-color var(--ui-motion-fast);
+  }
+  .ui-control[data-size="lg"],
+  .ui-control[data-size="icon-lg"] {
+    height: calc(var(--ui-control-height) + 4px);
+  }
+  .ui-control[data-size^="icon"] {
+    width: var(--ui-control-height);
+    padding: 0;
+  }
+  .ui-control[aria-invalid="true"] {
+    border-color: var(--error);
+  }
+  .ui-control::placeholder {
+    color: var(--muted-foreground);
+    opacity: 1;
+  }
+  [data-slot="button"][aria-busy="true"] {
+    cursor: progress;
+  }
+  .ui-menu {
+    background: var(--popover);
+    color: var(--popover-foreground);
+    border: 1px solid var(--border-strong);
+    border-radius: var(--radius-md-value);
+    box-shadow: var(--shadow-md);
+  }
+  .ui-menu [role^="menuitem"],
+  .ui-menu [role="option"] {
+    min-height: var(--ui-control-height);
+    font-size: var(--text-base);
+  }
+  .ui-menu [data-highlighted] {
+    background: var(--surface-subtle);
+    outline: 1px solid var(--ring);
+    outline-offset: -2px;
+  }
+  .ui-popup[data-state="open"] {
+    animation: ui-reveal var(--ui-motion-fast) ease-out;
+  }
+  .ui-popup[data-state="closed"] {
+    animation: ui-hide var(--ui-motion-fast) ease-in;
+  }
+  [data-slot="dialog-content"],
+  [data-slot="dialog-overlay"] {
+    --ui-motion-fast: var(--ui-motion-standard);
+  }
+  [data-slot="card"] {
+    gap: var(--ui-field-gap);
+    padding-block: var(--ui-panel-padding);
+  }
+  [data-slot="card-header"],
+  [data-slot="card-content"],
+  [data-slot="card-footer"] {
+    padding-inline: var(--ui-panel-padding);
+  }
+  [data-ui-layout] {
+    width: 100%;
+    margin-inline: auto;
+  }
+  [data-ui-layout="reading"] {
+    max-width: var(--ui-width-reading);
+    line-height: var(--leading-relaxed);
+  }
+  [data-ui-layout="settings"] {
+    max-width: var(--ui-width-settings);
+  }
+  [data-ui-layout="list"] {
+    max-width: var(--ui-width-list);
+  }
+  [data-ui-layout="short-form"] {
+    max-width: var(--ui-width-short-form);
+  }
+  [data-ui-layout="fluid"] {
+    max-width: none;
+  }
+  .ui-choice {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .ui-choice:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+  .ui-choice::before {
+    content: "";
+    position: absolute;
+    width: 44px;
+    height: 44px;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+  [data-slot="switch"] {
+    width: 36px;
+    height: 22px;
+    padding: 3px;
+    border-radius: 999px;
+    background: var(--border-strong);
+    transition: background-color var(--ui-motion-fast);
+  }
+  [data-slot="switch"][data-state="checked"] {
+    background: var(--primary);
+  }
+  [data-slot="switch-thumb"] {
+    width: 16px;
+    height: 16px;
+    border-radius: 999px;
+    background: white;
+    transform: translateX(-7px);
+    transition: transform var(--ui-motion-standard);
+  }
+  [data-slot="switch-thumb"][data-state="checked"] {
+    background: var(--primary-foreground);
+    transform: translateX(7px);
+  }
+  [data-slot="checkbox"] {
+    width: 18px;
+    height: 18px;
+    border: 1px solid var(--border-strong);
+    border-radius: var(--radius-sm-value);
+    background: var(--background);
+  }
+  [data-slot="checkbox"][data-state="checked"],
+  [data-slot="checkbox"][data-state="indeterminate"] {
+    color: var(--primary-foreground);
+    background: var(--primary);
+    border-color: var(--primary);
+  }
+  .ui-choice-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 12px;
+    min-height: 44px;
+    cursor: pointer;
+  }
+  [data-sonner-toast] {
+    font-family: var(--font-sans);
+    --normal-bg: var(--popover);
+    --normal-text: var(--foreground);
+    --normal-border: var(--border-strong);
+    transition-duration: var(--ui-motion-standard);
+  }
+}
+
+@keyframes ui-reveal {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes ui-hide {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@media (max-width: 560px), (pointer: coarse) {
+  .ui-control,
+  .ui-textarea,
+  [data-slot="dialog-close"] {
+    min-height: 44px;
+  }
+  .ui-control[data-size^="icon"],
+  [data-slot="dialog-close"] {
+    min-width: 44px;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-slot],
+  [data-slot] *,
+  [data-sonner-toast],
+  [data-sonner-toast] * {
+    animation: none !important;
+    transition: none !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* Background-only switch tracks/thumbs both become Canvas under forced colors.
+   System colors preserve the control boundary, state and moving thumb. */
+@media (forced-colors: active) {
+  [data-slot="switch"] {
+    forced-color-adjust: none;
+    border: 1px solid ButtonText;
+    background: Canvas;
+  }
+  [data-slot="switch-thumb"] {
+    background: ButtonText;
+  }
+  [data-slot="switch"][data-state="checked"] {
+    background: Highlight;
+    border-color: Highlight;
+  }
+  [data-slot="switch-thumb"][data-state="checked"] {
+    background: HighlightText;
+  }
+  [data-slot="switch"]:disabled {
+    opacity: 1;
+    background: Canvas;
+    border-color: GrayText;
+  }
+  [data-slot="switch"]:disabled [data-slot="switch-thumb"] {
+    background: GrayText;
+  }
+}

package/src/styles/globals.css

@@ -0,0 +1,18 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "./theme.css";
+@import "./components.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground font-sans text-base leading-normal antialiased;
+  }
+  :lang(ja) {
+    font-family: "Noto Sans JP", var(--font-sans);
+  }
+}