@tekton-ui/ui 0.2.0

package/package.json

@@ -0,0 +1,117 @@
+{
+  "name": "@tekton-ui/ui",
+  "version": "0.2.0",
+  "description": "Tekton UI Reference Component Library",
+  "main": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.mts"
+    },
+    "./styles": "./styles/tokens.css"
+  },
+  "files": [
+    "dist",
+    "styles",
+    "README.md",
+    "package.json"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/soo-kate-yeon/tekton",
+    "directory": "packages/ui"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:a11y": "vitest accessibility",
+    "test:coverage": "vitest --coverage",
+    "lint": "eslint src --ext .ts,.tsx,.js,.jsx",
+    "type-check": "tsc --noEmit",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build -o storybook-static",
+    "prepublishOnly": "pnpm build"
+  },
+  "keywords": [
+    "design-system",
+    "components",
+    "react",
+    "typescript",
+    "radix-ui",
+    "accessibility"
+  ],
+  "dependencies": {
+    "@hookform/resolvers": "^3.3.4",
+    "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-progress": "^1.0.3",
+    "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-scroll-area": "^1.0.5",
+    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slider": "^1.1.2",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-toast": "^1.1.5",
+    "@radix-ui/react-tooltip": "^1.0.7",
+    "@tekton-ui/tokens": "workspace:*",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "framer-motion": "^12.29.2",
+    "lucide-react": "^0.294.0",
+    "react-day-picker": "^9.13.0",
+    "react-hook-form": "^7.49.3",
+    "tailwind-merge": "^2.2.2",
+    "zod": "^3.22.4"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@axe-core/react": "^4.8.0",
+    "@storybook/addon-a11y": "^8.6.15",
+    "@storybook/addon-essentials": "^8.6.15",
+    "@storybook/addon-interactions": "^8.6.15",
+    "@storybook/addon-themes": "^8.6.15",
+    "@storybook/react": "^8.6.15",
+    "@storybook/react-vite": "^8.6.15",
+    "@storybook/test": "^8.6.15",
+    "@storybook/theming": "^8.6.15",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.0.0",
+    "@types/react": "~18.2.79",
+    "@types/react-dom": "~18.2.25",
+    "@typescript-eslint/eslint-plugin": "^8.20.0",
+    "@typescript-eslint/parser": "^8.20.0",
+    "@vitest/coverage-v8": "^2.1.8",
+    "autoprefixer": "^10.4.23",
+    "axe-core": "^4.11.1",
+    "eslint": "^9.18.0",
+    "happy-dom": "^20.3.9",
+    "postcss": "^8.5.6",
+    "storybook": "^8.6.15",
+    "tailwindcss": "^3.4.19",
+    "tailwindcss-animate": "^1.0.7",
+    "tsup": "^8.0.0",
+    "typescript": "^5.7.0",
+    "vitest": "^2.1.8",
+    "vitest-axe": "^0.1.0"
+  }
+}

package/styles/globals.css

@@ -0,0 +1,191 @@
+/**
+ * @tekton/ui - Global Styles
+ * SPEC-UI-001: shadcn-ui Fork & Token Integration
+ *
+ * This file provides base styles for Tekton UI components.
+ * Theme-specific CSS Variables are loaded dynamically via theme-loader.ts
+ *
+ * Usage in Next.js:
+ * ```tsx
+ * import '@tekton/ui/styles/globals.css';
+ * ```
+ */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ========================================
+   Base Layer
+   Foundational styles for all components
+   ======================================== */
+
+@layer base {
+  * {
+    @apply border-[var(--tekton-border-default)];
+  }
+
+  body {
+    @apply bg-[var(--tekton-bg-background)] text-[var(--tekton-bg-foreground)];
+  }
+}
+
+/* ========================================
+   Tekton Token Defaults
+   Fallback values when theme is not loaded
+   These are overridden by theme-loader.ts
+   ======================================== */
+
+:root {
+  /* Background Tokens */
+  --tekton-bg-background: oklch(0.99 0.005 265);
+  --tekton-bg-foreground: oklch(0.2 0.04 265);
+  --tekton-bg-card: oklch(1 0 0);
+  --tekton-bg-card-foreground: oklch(0.2 0.04 265);
+  --tekton-bg-popover: oklch(1 0 0);
+  --tekton-bg-popover-foreground: oklch(0.2 0.04 265);
+  --tekton-bg-primary: oklch(0.55 0.12 265);
+  --tekton-bg-primary-foreground: oklch(1 0 0);
+  --tekton-bg-secondary: oklch(0.96 0.01 265);
+  --tekton-bg-secondary-foreground: oklch(0.2 0.04 265);
+  --tekton-bg-muted: oklch(0.99 0.005 265);
+  --tekton-bg-muted-foreground: oklch(0.6 0.03 265);
+  --tekton-bg-accent: oklch(0.96 0.01 265);
+  --tekton-bg-accent-foreground: oklch(0.2 0.04 265);
+  --tekton-bg-destructive: oklch(0.55 0.22 30);
+  --tekton-bg-destructive-foreground: oklch(1 0 0);
+
+  /* Border Tokens */
+  --tekton-border-default: oklch(0.92 0.015 265);
+  --tekton-border-input: oklch(0.96 0.01 265);
+  --tekton-border-ring: oklch(0.55 0.12 265);
+
+  /* Radius Tokens */
+  --tekton-radius-xs: 2px;
+  --tekton-radius-sm: 4px;
+  --tekton-radius-md: 6px;
+  --tekton-radius-lg: 8px;
+  --tekton-radius-xl: 12px;
+  --tekton-radius-2xl: 16px;
+  --tekton-radius-3xl: 24px;
+  --tekton-radius-full: 9999px;
+  --tekton-radius-none: 0;
+
+  /* Spacing Tokens */
+  --tekton-spacing-0: 0;
+  --tekton-spacing-1: 4px;
+  --tekton-spacing-2: 8px;
+  --tekton-spacing-3: 12px;
+  --tekton-spacing-4: 16px;
+  --tekton-spacing-5: 20px;
+  --tekton-spacing-6: 24px;
+  --tekton-spacing-8: 32px;
+  --tekton-spacing-10: 40px;
+  --tekton-spacing-12: 48px;
+  --tekton-spacing-16: 64px;
+  --tekton-spacing-20: 80px;
+  --tekton-spacing-24: 96px;
+
+  /* Motion Tokens [SPEC-UI-001] [TAG-018] */
+  --tekton-motion-duration-instant: 0ms;
+  --tekton-motion-duration-fast: 100ms;
+  --tekton-motion-duration-moderate: 200ms;
+  --tekton-motion-duration-slow: 300ms;
+  --tekton-motion-duration-complex: 500ms;
+  --tekton-motion-easing-linear: linear;
+  --tekton-motion-easing-standard: cubic-bezier(0, 0, 0.2, 1);
+  --tekton-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  --tekton-motion-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
+  --tekton-motion-easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
+}
+
+/* ========================================
+   Dark Mode Support
+   Auto-applied when [data-theme="*-dark"] or .dark
+   ======================================== */
+
+[data-theme*="-dark"],
+.dark {
+  --tekton-bg-background: oklch(0.15 0.02 265);
+  --tekton-bg-foreground: oklch(0.95 0.005 265);
+  --tekton-bg-card: oklch(0.2 0.03 265);
+  --tekton-bg-card-foreground: oklch(0.95 0.005 265);
+  --tekton-bg-popover: oklch(0.2 0.03 265);
+  --tekton-bg-popover-foreground: oklch(0.95 0.005 265);
+  --tekton-bg-primary: oklch(0.6 0.14 265);
+  --tekton-bg-primary-foreground: oklch(0.1 0.01 265);
+  --tekton-bg-secondary: oklch(0.25 0.03 265);
+  --tekton-bg-secondary-foreground: oklch(0.95 0.005 265);
+  --tekton-bg-muted: oklch(0.18 0.02 265);
+  --tekton-bg-muted-foreground: oklch(0.7 0.02 265);
+  --tekton-bg-accent: oklch(0.25 0.03 265);
+  --tekton-bg-accent-foreground: oklch(0.95 0.005 265);
+  --tekton-bg-destructive: oklch(0.5 0.2 30);
+  --tekton-bg-destructive-foreground: oklch(1 0 0);
+
+  --tekton-border-default: oklch(0.3 0.03 265);
+  --tekton-border-input: oklch(0.25 0.03 265);
+  --tekton-border-ring: oklch(0.6 0.14 265);
+}
+
+/* ========================================
+   Accessibility Utilities
+   Focus rings, reduced motion, high contrast
+   ======================================== */
+
+@layer utilities {
+  /* Focus visible states */
+  .focus-ring {
+    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--tekton-border-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--tekton-bg-background)];
+  }
+
+  /* Reduced motion support */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+
+  /* High contrast mode support */
+  @media (prefers-contrast: high) {
+    * {
+      border-width: 2px;
+    }
+  }
+}
+
+/* ========================================
+   Component Base Styles
+   Shared styles for shadcn-ui components
+   ======================================== */
+
+@layer components {
+  /* Scrollbar styling */
+  .tekton-scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: var(--tekton-bg-muted) transparent;
+  }
+
+  .tekton-scrollbar::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  .tekton-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .tekton-scrollbar::-webkit-scrollbar-thumb {
+    background: var(--tekton-bg-muted);
+    border-radius: var(--tekton-radius-full);
+  }
+
+  .tekton-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: var(--tekton-bg-muted-foreground);
+  }
+}

package/styles/tokens.css

@@ -0,0 +1,303 @@
+/**
+ * Tekton UI Token Variables Template
+ * Generated by: SPEC-COMPONENT-001-C
+ * This file is a template showing expected CSS Variable structure
+ *
+ * Usage: Import this file and customize variables in your application
+ * @import '@tekton/ui/styles';
+ */
+
+:root {
+  /* ========================================
+     Layer 1: Atomic Tokens
+     Foundation tokens for colors, spacing, typography
+     ======================================== */
+
+  /* Colors - Primary Palette */
+  --color-primary-50: #eff6ff;
+  --color-primary-100: #dbeafe;
+  --color-primary-200: #bfdbfe;
+  --color-primary-300: #93c5fd;
+  --color-primary-400: #60a5fa;
+  --color-primary-500: #3b82f6;
+  --color-primary-600: #2563eb;
+  --color-primary-700: #1d4ed8;
+  --color-primary-800: #1e40af;
+  --color-primary-900: #1e3a8a;
+
+  /* Colors - Neutral Palette */
+  --color-neutral-50: #f9fafb;
+  --color-neutral-100: #f3f4f6;
+  --color-neutral-200: #e5e7eb;
+  --color-neutral-300: #d1d5db;
+  --color-neutral-400: #9ca3af;
+  --color-neutral-500: #6b7280;
+  --color-neutral-600: #4b5563;
+  --color-neutral-700: #374151;
+  --color-neutral-800: #1f2937;
+  --color-neutral-900: #111827;
+
+  /* Colors - Semantic */
+  --color-success-500: #10b981;
+  --color-warning-500: #f59e0b;
+  --color-error-500: #ef4444;
+  --color-info-500: #3b82f6;
+
+  /* Spacing */
+  --spacing-1: 0.25rem; /* 4px */
+  --spacing-2: 0.5rem; /* 8px */
+  --spacing-3: 0.75rem; /* 12px */
+  --spacing-4: 1rem; /* 16px */
+  --spacing-5: 1.25rem; /* 20px */
+  --spacing-6: 1.5rem; /* 24px */
+  --spacing-8: 2rem; /* 32px */
+  --spacing-10: 2.5rem; /* 40px */
+  --spacing-12: 3rem; /* 48px */
+
+  /* Border Radius */
+  --radius-none: 0;
+  --radius-sm: 0.125rem; /* 2px */
+  --radius-md: 0.375rem; /* 6px */
+  --radius-lg: 0.5rem; /* 8px */
+  --radius-xl: 0.75rem; /* 12px */
+  --radius-2xl: 1rem; /* 16px */
+  --radius-full: 9999px;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
+
+  /* ========================================
+     Layer 2: Semantic Tokens
+     Purpose-based tokens referencing atomic tokens
+     ======================================== */
+
+  --background-page: var(--color-neutral-50);
+  --background-elevated: white;
+  --foreground-primary: var(--color-neutral-900);
+  --foreground-secondary: var(--color-neutral-700);
+  --foreground-muted: var(--color-neutral-500);
+  --foreground-accent: var(--color-primary-600);
+  --foreground-inverse: white;
+
+  --border-default: var(--color-neutral-200);
+  --border-focus: var(--color-primary-500);
+  --border-error: var(--color-error-500);
+
+  --surface-primary: white;
+  --surface-secondary: var(--color-neutral-100);
+  --surface-elevated: white;
+  --surface-inverse: var(--color-neutral-900);
+
+  /* ========================================
+     Layer 3: Component Tokens
+     Component-specific tokens for all 20 components
+     ======================================== */
+
+  /* Button Component */
+  --button-default-background: var(--color-primary-600);
+  --button-default-foreground: white;
+  --button-default-border: transparent;
+  --button-default-hover-background: var(--color-primary-700);
+
+  --button-secondary-background: var(--color-neutral-200);
+  --button-secondary-foreground: var(--color-neutral-900);
+  --button-secondary-hover-background: var(--color-neutral-300);
+
+  --button-ghost-hover-background: var(--color-neutral-100);
+  --button-ghost-hover-foreground: var(--color-neutral-900);
+
+  --button-destructive-background: var(--color-error-500);
+  --button-destructive-foreground: white;
+  --button-destructive-hover-background: #dc2626;
+
+  --button-outline-border: var(--color-neutral-300);
+  --button-outline-hover-background: var(--color-neutral-100);
+  --button-outline-hover-foreground: var(--color-neutral-900);
+
+  --button-link-foreground: var(--color-primary-600);
+
+  /* Input Component */
+  --input-background: white;
+  --input-foreground: var(--foreground-primary);
+  --input-border: var(--border-default);
+  --input-placeholder: var(--foreground-muted);
+  --input-focus-ring: var(--color-primary-500);
+  --input-error-border: var(--color-error-500);
+  --input-error-ring: var(--color-error-500);
+
+  /* Checkbox Component */
+  --checkbox-border: var(--border-default);
+  --checkbox-background: white;
+  --checkbox-checked-background: var(--color-primary-600);
+  --checkbox-checked-foreground: white;
+  --checkbox-focus-ring: var(--color-primary-500);
+
+  /* Radio Component */
+  --radio-border: var(--border-default);
+  --radio-background: white;
+  --radio-checked-foreground: var(--color-primary-600);
+  --radio-focus-ring: var(--color-primary-500);
+
+  /* Switch Component */
+  --switch-background: var(--color-neutral-300);
+  --switch-checked-background: var(--color-primary-600);
+  --switch-thumb-background: white;
+  --switch-focus-ring: var(--color-primary-500);
+
+  /* Slider Component */
+  --slider-track-background: var(--color-neutral-200);
+  --slider-range-background: var(--color-primary-600);
+  --slider-thumb-background: white;
+  --slider-thumb-border: var(--color-primary-600);
+  --slider-thumb-ring-offset: white;
+  --slider-focus-ring: var(--color-primary-500);
+
+  /* Text Component */
+  --text-body-color: var(--foreground-primary);
+  --text-caption-color: var(--foreground-muted);
+  --text-label-color: var(--foreground-secondary);
+  --text-code-color: var(--color-primary-600);
+
+  /* Heading Component */
+  --heading-foreground: var(--foreground-primary);
+
+  /* Badge Component */
+  --badge-default-background: var(--color-primary-600);
+  --badge-default-foreground: white;
+  --badge-secondary-background: var(--color-neutral-200);
+  --badge-secondary-foreground: var(--color-neutral-900);
+  --badge-destructive-background: var(--color-error-500);
+  --badge-destructive-foreground: white;
+  --badge-outline-border: var(--border-default);
+  --badge-outline-foreground: var(--foreground-primary);
+
+  /* Avatar Component */
+  --avatar-fallback-background: var(--color-neutral-200);
+  --avatar-fallback-foreground: var(--color-neutral-700);
+
+  /* Progress Component */
+  --progress-background: var(--color-neutral-200);
+  --progress-indicator-background: var(--color-primary-600);
+
+  /* Link Component */
+  --link-foreground: var(--color-primary-600);
+  --link-hover-foreground: var(--color-primary-700);
+  --link-muted-foreground: var(--foreground-muted);
+  --link-muted-hover-foreground: var(--foreground-primary);
+  --link-subtle-foreground: var(--foreground-secondary);
+  --link-subtle-hover-foreground: var(--foreground-primary);
+
+  /* List Component */
+  --list-foreground: var(--foreground-primary);
+  --list-item-foreground: var(--foreground-primary);
+
+  /* Image Component */
+  --image-placeholder-background: var(--color-neutral-100);
+
+  /* Card Component */
+  --card-background: white;
+  --card-foreground: var(--foreground-primary);
+  --card-border: var(--border-default);
+  --card-shadow: var(--shadow-sm);
+  --card-title-foreground: var(--foreground-primary);
+  --card-description-foreground: var(--foreground-muted);
+
+  /* Form Component */
+  --form-label-foreground: var(--foreground-secondary);
+  --form-message-error-foreground: var(--color-error-500);
+
+  /* Modal Component */
+  --modal-overlay-background: rgb(0 0 0 / 0.5);
+  --modal-background: white;
+  --modal-border: var(--border-default);
+  --modal-title-foreground: var(--foreground-primary);
+  --modal-description-foreground: var(--foreground-muted);
+  --modal-close-hover-background: var(--color-neutral-100);
+  --modal-close-foreground: var(--foreground-muted);
+
+  /* Dropdown Component */
+  --dropdown-background: white;
+  --dropdown-foreground: var(--foreground-primary);
+  --dropdown-border: var(--border-default);
+  --dropdown-item-focus-background: var(--color-neutral-100);
+  --dropdown-item-focus-foreground: var(--foreground-primary);
+  --dropdown-separator-background: var(--border-default);
+
+  /* Tabs Component */
+  --tabs-list-background: var(--color-neutral-100);
+  --tabs-list-foreground: var(--foreground-muted);
+  --tabs-trigger-active-background: white;
+  --tabs-trigger-active-foreground: var(--foreground-primary);
+  --tabs-trigger-ring-offset: white;
+  --tabs-trigger-focus-ring: var(--color-primary-500);
+  --tabs-content-ring-offset: white;
+  --tabs-content-focus-ring: var(--color-primary-500);
+
+  /* Table Component */
+  --table-foreground: var(--foreground-primary);
+  --table-border: var(--border-default);
+  --table-footer-background: var(--color-neutral-50);
+  --table-row-hover-background: var(--color-neutral-50);
+  --table-row-selected-background: var(--color-neutral-100);
+  --table-head-foreground: var(--foreground-muted);
+  --table-caption-foreground: var(--foreground-muted);
+}
+
+/* ========================================
+   Dark Mode Theme
+   Override variables for dark mode
+   ======================================== */
+
+.dark {
+  --background-page: var(--color-neutral-900);
+  --background-elevated: var(--color-neutral-800);
+  --foreground-primary: var(--color-neutral-50);
+  --foreground-secondary: var(--color-neutral-300);
+  --foreground-muted: var(--color-neutral-400);
+  --foreground-inverse: var(--color-neutral-900);
+
+  --border-default: var(--color-neutral-700);
+  --border-focus: var(--color-primary-400);
+
+  --surface-primary: var(--color-neutral-800);
+  --surface-secondary: var(--color-neutral-700);
+  --surface-elevated: var(--color-neutral-800);
+  --surface-inverse: var(--color-neutral-50);
+
+  /* Button Dark Mode */
+  --button-default-background: var(--color-primary-500);
+  --button-default-hover-background: var(--color-primary-600);
+
+  --button-secondary-background: var(--color-neutral-700);
+  --button-secondary-foreground: var(--color-neutral-100);
+  --button-secondary-hover-background: var(--color-neutral-600);
+
+  --button-ghost-hover-background: var(--color-neutral-700);
+
+  --button-outline-border: var(--color-neutral-600);
+  --button-outline-hover-background: var(--color-neutral-700);
+
+  /* Input Dark Mode */
+  --input-background: var(--color-neutral-800);
+  --input-border: var(--color-neutral-700);
+
+  /* Card Dark Mode */
+  --card-background: var(--color-neutral-800);
+  --card-border: var(--color-neutral-700);
+
+  /* Modal Dark Mode */
+  --modal-background: var(--color-neutral-800);
+  --modal-border: var(--color-neutral-700);
+
+  /* Dropdown Dark Mode */
+  --dropdown-background: var(--color-neutral-800);
+  --dropdown-border: var(--color-neutral-700);
+
+  /* Table Dark Mode */
+  --table-footer-background: var(--color-neutral-800);
+  --table-row-hover-background: var(--color-neutral-700);
+  --table-row-selected-background: var(--color-neutral-600);
+}