@potenlab/ui 0.1.0

package/dist/lib/index.d.ts

@@ -0,0 +1,6 @@
+import { ClassValue } from 'clsx';
+
+declare function cn(...inputs: ClassValue[]): string;
+declare function formatNumber(n: number): string;
+
+export { cn, formatNumber };

package/dist/lib/index.js

@@ -0,0 +1,4 @@
+import '../chunk-T2ZO7QTO.js';
+export { cn, formatNumber } from '../chunk-DUACVZEX.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/styles/globals.css

@@ -0,0 +1,167 @@
+@custom-variant dark (&:is(.dark *));
+
+/* ============================================================
+   Tailwind CSS 4 @theme — Potenlab Design Tokens
+   All custom colors, fonts, and radii registered as first-class
+   Tailwind utilities (bg-primary, text-placeholder, font-pretendard, etc.)
+   ============================================================ */
+@theme inline {
+  /* ---------- shadcn/ui CSS-variable-backed colors ---------- */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --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-ring: var(--ring);
+  --color-input: var(--input);
+
+  /* shadcn sidebar colors */
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+
+  /* shadcn chart colors */
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+
+  /* ---------- Potenlab brand colors (direct hex values) ---------- */
+  --color-primary: #509594;
+  --color-primary-hover: #3F7A79;
+  --color-primary-active: #357070;
+  --color-primary-light: #B9D5D4;
+
+  /* Backgrounds & surfaces */
+  --color-surface: #FFFFFF;
+  --color-border: #E2E8F0;
+  --color-divider: #EFF1F4;
+  --color-table-header: #F9FAFC;
+  --color-sidebar-selected: #EEF2F6;
+
+  /* Text colors */
+  --color-placeholder: #A0AEC0;
+  --color-subtitle: #9DA0A8;
+  --color-muted-fg: #5A5E6A;
+  --color-table-cell: #3B3F4A;
+  --color-inactive-tab-text: #1A202C;
+
+  /* Component-specific */
+  --color-inactive-tab: #EFF1F4;
+  --color-badge-green-bg: #C6F6D5;
+  --color-badge-green-text: #22543D;
+  --color-toggle-on: #3B82F6;
+  --color-toggle-off: #CBD5E0;
+  --color-delete-text: #3F7A79;
+
+  /* ---------- Font family tokens ---------- */
+  --font-pretendard: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-inter: var(--font-inter-var, 'Inter'), 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
+  --font-sans: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+
+  /* ---------- Border radii ---------- */
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+}
+
+/* ============================================================
+   :root — CSS variables for shadcn/ui overrides
+   These are consumed by the @theme block above via var() references
+   and directly by shadcn components.
+   ============================================================ */
+:root {
+  /* Border radius base */
+  --radius: 0.625rem;
+
+  /* shadcn core variables — overridden for Potenlab brand */
+  --background: #FCFCFC;
+  --foreground: #000000;
+  --card: #FFFFFF;
+  --card-foreground: #000000;
+  --popover: #FFFFFF;
+  --popover-foreground: #000000;
+  --primary: #509594;
+  --primary-foreground: #FFFFFF;
+  --secondary: #EEF2F6;
+  --secondary-foreground: #000000;
+  --muted: #F9FAFC;
+  --muted-foreground: #5A5E6A;
+  --accent: #EEF2F6;
+  --accent-foreground: #000000;
+  --destructive: #EF4444;
+  --border: #E2E8F0;
+  --input: #E2E8F0;
+  --ring: #509594;
+
+  /* Charts (keep shadcn defaults) */
+  --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 */
+  --sidebar: #FFFFFF;
+  --sidebar-foreground: #000000;
+  --sidebar-primary: #509594;
+  --sidebar-primary-foreground: #FFFFFF;
+  --sidebar-accent: #EEF2F6;
+  --sidebar-accent-foreground: #000000;
+  --sidebar-border: #E2E8F0;
+  --sidebar-ring: #509594;
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 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.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --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/package.json

@@ -0,0 +1,137 @@
+{
+  "name": "@potenlab/ui",
+  "version": "0.1.0",
+  "description": "Potenlab shared UI component library",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/potenlab/potenlab-library.git"
+  },
+  "homepage": "https://github.com/potenlab/potenlab-library#readme",
+  "keywords": ["react", "ui", "components", "tailwindcss", "potenlab"],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": ["**/*.css"],
+  "files": [
+    "dist",
+    "src/styles"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./components/ui": {
+      "import": {
+        "types": "./dist/components/ui/index.d.ts",
+        "default": "./dist/components/ui/index.js"
+      },
+      "require": {
+        "types": "./dist/components/ui/index.d.cts",
+        "default": "./dist/components/ui/index.cjs"
+      }
+    },
+    "./components/common": {
+      "import": {
+        "types": "./dist/components/common/index.d.ts",
+        "default": "./dist/components/common/index.js"
+      },
+      "require": {
+        "types": "./dist/components/common/index.d.cts",
+        "default": "./dist/components/common/index.cjs"
+      }
+    },
+    "./components/layouts": {
+      "import": {
+        "types": "./dist/components/layouts/index.d.ts",
+        "default": "./dist/components/layouts/index.js"
+      },
+      "require": {
+        "types": "./dist/components/layouts/index.d.cts",
+        "default": "./dist/components/layouts/index.cjs"
+      }
+    },
+    "./hooks": {
+      "import": {
+        "types": "./dist/hooks/index.d.ts",
+        "default": "./dist/hooks/index.js"
+      },
+      "require": {
+        "types": "./dist/hooks/index.d.cts",
+        "default": "./dist/hooks/index.cjs"
+      }
+    },
+    "./lib": {
+      "import": {
+        "types": "./dist/lib/index.d.ts",
+        "default": "./dist/lib/index.js"
+      },
+      "require": {
+        "types": "./dist/lib/index.d.cts",
+        "default": "./dist/lib/index.cjs"
+      }
+    },
+    "./styles/globals.css": "./dist/styles/globals.css"
+  },
+  "scripts": {
+    "build": "tsup && mkdir -p dist/styles && cp src/styles/globals.css dist/styles/globals.css",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "release:patch": "npm version patch && bun run build && npm publish --access public",
+    "release:minor": "npm version minor && bun run build && npm publish --access public",
+    "release:major": "npm version major && bun run build && npm publish --access public"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "tailwindcss": ">=4"
+  },
+  "peerDependenciesMeta": {
+    "next-themes": {
+      "optional": true
+    },
+    "@tanstack/react-table": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.576.0",
+    "radix-ui": "^1.4.3",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.5.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-a11y": "^10.2.14",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/react": "^10.2.14",
+    "@storybook/react-vite": "^10.2.14",
+    "@tailwindcss/vite": "^4",
+    "@tanstack/react-table": "^8.21.3",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "next-themes": "^0.4.6",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "storybook": "^10.2.14",
+    "tailwindcss": "^4",
+    "tsup": "^8.5.0",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5"
+  }
+}

package/src/styles/globals.css

@@ -0,0 +1,167 @@
+@custom-variant dark (&:is(.dark *));
+
+/* ============================================================
+   Tailwind CSS 4 @theme — Potenlab Design Tokens
+   All custom colors, fonts, and radii registered as first-class
+   Tailwind utilities (bg-primary, text-placeholder, font-pretendard, etc.)
+   ============================================================ */
+@theme inline {
+  /* ---------- shadcn/ui CSS-variable-backed colors ---------- */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --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-ring: var(--ring);
+  --color-input: var(--input);
+
+  /* shadcn sidebar colors */
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+
+  /* shadcn chart colors */
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+
+  /* ---------- Potenlab brand colors (direct hex values) ---------- */
+  --color-primary: #509594;
+  --color-primary-hover: #3F7A79;
+  --color-primary-active: #357070;
+  --color-primary-light: #B9D5D4;
+
+  /* Backgrounds & surfaces */
+  --color-surface: #FFFFFF;
+  --color-border: #E2E8F0;
+  --color-divider: #EFF1F4;
+  --color-table-header: #F9FAFC;
+  --color-sidebar-selected: #EEF2F6;
+
+  /* Text colors */
+  --color-placeholder: #A0AEC0;
+  --color-subtitle: #9DA0A8;
+  --color-muted-fg: #5A5E6A;
+  --color-table-cell: #3B3F4A;
+  --color-inactive-tab-text: #1A202C;
+
+  /* Component-specific */
+  --color-inactive-tab: #EFF1F4;
+  --color-badge-green-bg: #C6F6D5;
+  --color-badge-green-text: #22543D;
+  --color-toggle-on: #3B82F6;
+  --color-toggle-off: #CBD5E0;
+  --color-delete-text: #3F7A79;
+
+  /* ---------- Font family tokens ---------- */
+  --font-pretendard: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-inter: var(--font-inter-var, 'Inter'), 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
+  --font-sans: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+
+  /* ---------- Border radii ---------- */
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+}
+
+/* ============================================================
+   :root — CSS variables for shadcn/ui overrides
+   These are consumed by the @theme block above via var() references
+   and directly by shadcn components.
+   ============================================================ */
+:root {
+  /* Border radius base */
+  --radius: 0.625rem;
+
+  /* shadcn core variables — overridden for Potenlab brand */
+  --background: #FCFCFC;
+  --foreground: #000000;
+  --card: #FFFFFF;
+  --card-foreground: #000000;
+  --popover: #FFFFFF;
+  --popover-foreground: #000000;
+  --primary: #509594;
+  --primary-foreground: #FFFFFF;
+  --secondary: #EEF2F6;
+  --secondary-foreground: #000000;
+  --muted: #F9FAFC;
+  --muted-foreground: #5A5E6A;
+  --accent: #EEF2F6;
+  --accent-foreground: #000000;
+  --destructive: #EF4444;
+  --border: #E2E8F0;
+  --input: #E2E8F0;
+  --ring: #509594;
+
+  /* Charts (keep shadcn defaults) */
+  --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 */
+  --sidebar: #FFFFFF;
+  --sidebar-foreground: #000000;
+  --sidebar-primary: #509594;
+  --sidebar-primary-foreground: #FFFFFF;
+  --sidebar-accent: #EEF2F6;
+  --sidebar-accent-foreground: #000000;
+  --sidebar-border: #E2E8F0;
+  --sidebar-ring: #509594;
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 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.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --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);
+}