@bbki.ng/ui 0.1.1

package/.storybook/main.ts

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+import path from 'path';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-essentials'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  viteFinal: async config => {
+    config.resolve = config.resolve || {};
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      '@': path.resolve(__dirname, '../src'),
+    };
+    return config;
+  },
+};
+
+export default config;

package/.storybook/preview-head.html

@@ -0,0 +1,10 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC&display=swap" rel="stylesheet" />
+<style>
+  .noto-serif {
+    font-family: 'Menlo', 'Consolas', 'Noto Serif SC', monospace;
+    font-weight: 400;
+    font-style: normal;
+  }
+</style>

package/.storybook/preview.tsx

@@ -0,0 +1,30 @@
+import type { Preview } from '@storybook/react';
+import React from 'react';
+import { ThemeProvider } from '../src/theme';
+import '../src/styles.css';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    backgrounds: {
+      disable: true,
+    },
+  },
+  decorators: [
+    Story => (
+      <ThemeProvider>
+        <div className="p-8 noto-serif">
+          <Story />
+        </div>
+      </ThemeProvider>
+    ),
+  ],
+};
+
+export default preview;

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# @bbki.ng/ui
+
+## 0.1.1
+
+### Patch Changes
+
+- 282af74: update ui components
+- 558e40b: update compoennts

package/README.md

@@ -0,0 +1,124 @@
+# @bbki.ng/ui
+
+设计系统组件库 - 基于原子设计方法论和 CSS 变量的主题系统。
+
+## 架构特点
+
+- **设计令牌层**: W3C DTCG 格式的 JSON 令牌，作为单一真相源
+- **CSS 变量主题**: 通过 CSS 变量实现动态主题切换，支持 light/dark/system
+- **原子设计分层**: Atoms → Layout，强制依赖方向
+- **Tree-shaking**: 独立模块输出，按需导入
+
+## 安装
+
+```bash
+pnpm add @bbki.ng/ui
+```
+
+## 使用
+
+### 基础用法
+
+```tsx
+import { ThemeProvider, Button, Container } from '@bbki.ng/ui';
+import '@bbki.ng/ui/styles';
+
+function App() {
+  return (
+    <ThemeProvider defaultTheme="light">
+      <Container maxWidth="lg">
+        <Button variant="primary" size="lg">
+          Get Started
+        </Button>
+      </Container>
+    </ThemeProvider>
+  );
+}
+```
+
+### 主题切换
+
+```tsx
+import { useTheme } from '@bbki.ng/ui';
+
+function ThemeToggle() {
+  const { theme, setTheme, toggleTheme } = useTheme();
+
+  return <button onClick={toggleTheme}>Current: {theme}</button>;
+}
+```
+
+## 组件
+
+### Button
+
+```tsx
+<Button variant="default" size="md">
+  Click me
+</Button>
+```
+
+Props:
+
+- `variant`: 'default' | 'primary' | 'danger' | 'ghost' | 'disabled'
+- `size`: 'sm' | 'md' | 'lg'
+- `transparent`: boolean
+- `loading`: boolean
+- `disabled`: boolean
+
+**注意**: 点击时有 280ms 的延迟动画效果，与旧版 Button 行为一致。
+
+### Container
+
+```tsx
+<Container maxWidth="lg" padding="md" centered>
+  Content
+</Container>
+```
+
+### Grid
+
+```tsx
+// 标准网格
+<Grid cols={3} gap="md">...items...</Grid>
+
+// 三栏布局
+<Grid leftAside={...} rightAside={...}>
+  Main content
+</Grid>
+```
+
+## 开发
+
+```bash
+# 开发模式
+pnpm dev
+
+# 构建令牌
+pnpm build:tokens
+
+# 构建包
+pnpm build
+
+# 启动 Storybook
+pnpm storybook
+
+# 类型检查
+pnpm typecheck
+```
+
+## 设计令牌
+
+令牌存储在 `tokens/` 目录下：
+
+- `tokens/base/`: 基础令牌（颜色、间距、字体、阴影）
+- `tokens/semantic/`: 语义令牌（light/dark 主题映射）
+
+修改令牌后运行 `pnpm build:tokens` 生成 CSS 变量。
+
+## 设计原则
+
+1. **Token 优先**: 所有数值来自设计令牌，禁止组件内硬编码
+2. **CSS 变量主题**: 通过 CSS 变量切换主题，而非 Tailwind 的 dark: 前缀
+3. **类型安全**: Props 继承原生 HTML 属性
+4. **Tree-shaking**: 按需导入，不使用的组件不会打包

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@bbki.ng/ui",
+  "version": "0.1.1",
+  "description": "Design system component library for bbki.ng",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "development": "./src/index.ts",
+      "import": "./dist/index.mjs"
+    },
+    "./styles": {
+      "import": "./dist/styles.css",
+      "default": "./dist/styles.css"
+    },
+    "./tokens/*": {
+      "import": "./src/tokens/css/*"
+    }
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.0",
+    "tailwind-merge": "^2.5.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^8.6.0",
+    "@storybook/react": "^8.6.0",
+    "@storybook/react-vite": "^8.6.0",
+    "@tailwindcss/vite": "^4.1.17",
+    "@types/react": "^18.0.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "storybook": "^8.6.0",
+    "style-dictionary": "^4.0.0",
+    "tailwindcss": "^4.1.17",
+    "tsx": "^4.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^4.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "scripts": {
+    "build": "pnpm build:tokens && vite build",
+    "build:tokens": "tsx scripts/build-tokens.ts",
+    "dev": "vite dev",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src --ext .ts,.tsx"
+  }
+}

package/scripts/build-tokens.ts

@@ -0,0 +1,170 @@
+#!/usr/bin/env node
+import StyleDictionary from 'style-dictionary';
+import type { Config, TransformedToken, Dictionary } from 'style-dictionary';
+import { promises as fs } from 'fs';
+import path from 'path';
+
+// 获取 token 引用的实际值
+function getTokenValue(token: TransformedToken, dictionary: Dictionary): string {
+  // 如果已经是解析后的值，直接返回
+  if (typeof token.value === 'string' && !token.value.startsWith('{')) {
+    return token.value;
+  }
+
+  // 处理引用格式 {color.gray.50}
+  if (typeof token.value === 'string' && token.value.startsWith('{')) {
+    const refPath = token.value.replace(/[{}]/g, '').split('.');
+    const refToken = dictionary.tokens;
+
+    // 递归查找引用的 token
+    let current: unknown = refToken;
+    for (const key of refPath) {
+      if (current && typeof current === 'object' && key in current) {
+        current = (current as Record<string, unknown>)[key];
+      } else {
+        return token.value; // 找不到引用，返回原值
+      }
+    }
+
+    // 如果找到的是 token 对象，获取其 value
+    if (current && typeof current === 'object' && current !== null) {
+      const tokenObj = current as { value?: string };
+      if (tokenObj.value) {
+        return tokenObj.value;
+      }
+    }
+  }
+
+  return token.value;
+}
+
+// 自定义格式：生成 CSS 变量，解析所有引用
+StyleDictionary.registerFormat({
+  name: 'css/variables-resolved',
+  format: ({ dictionary }) => {
+    const variables = dictionary.allTokens
+      .map((token: TransformedToken) => {
+        const value = getTokenValue(token, dictionary);
+        return `  --${token.name}: ${value};`;
+      })
+      .join('\n');
+
+    return `:root {\n${variables}\n}`;
+  },
+});
+
+// 自定义格式：生成 TypeScript 配置
+StyleDictionary.registerFormat({
+  name: 'typescript/theme-config',
+  format: ({ dictionary }) => {
+    const semanticColors = dictionary.allTokens
+      .filter((t: TransformedToken) => t.path[0] === 'semantic' && t.path[1] === 'color')
+      .reduce(
+        (acc: Record<string, string>, token: TransformedToken) => {
+          const name = token.path.slice(2).join('-');
+          acc[name] = `var(--${token.name})`;
+          return acc;
+        },
+        {} as Record<string, string>
+      );
+
+    const baseTokens = dictionary.allTokens
+      .filter((t: TransformedToken) => t.path[0] !== 'semantic')
+      .reduce(
+        (acc: Record<string, Record<string, string>>, token: TransformedToken) => {
+          const category = token.path[0] as string;
+          const name = token.path.slice(1).join('-');
+          if (!acc[category]) acc[category] = {};
+          acc[category][name] = `var(--${token.name})`;
+          return acc;
+        },
+        {} as Record<string, Record<string, string>>
+      );
+
+    return `/**
+ * Auto-generated from design tokens
+ * Do not edit manually
+ */
+export const tokens = {
+  colors: ${JSON.stringify(semanticColors, null, 2).replace(/"/g, "'")},
+  base: ${JSON.stringify(baseTokens, null, 2).replace(/"/g, "'")},
+} as const;
+
+export type ThemeTokens = typeof tokens;
+`;
+  },
+});
+
+async function ensureDir(dir: string) {
+  await fs.mkdir(dir, { recursive: true });
+}
+
+async function build() {
+  const basePath = process.cwd();
+  const srcTokensPath = path.join(basePath, 'src', 'tokens');
+  const cssPath = path.join(srcTokensPath, 'css');
+
+  await ensureDir(cssPath);
+
+  // Light theme config - 解析所有引用
+  const lightConfig: Config = {
+    log: { verbosity: 'verbose' },
+    source: ['tokens/base/**/*.json', 'tokens/semantic/light.json'],
+    platforms: {
+      css: {
+        transformGroup: 'css',
+        transforms: ['attribute/cti', 'name/kebab'],
+        buildPath: 'src/tokens/css/',
+        files: [
+          {
+            destination: 'light.css',
+            format: 'css/variables-resolved',
+          },
+        ],
+      },
+      typescript: {
+        transformGroup: 'js',
+        transforms: ['attribute/cti', 'name/kebab'],
+        buildPath: 'src/tokens/',
+        files: [
+          {
+            destination: 'index.ts',
+            format: 'typescript/theme-config',
+          },
+        ],
+      },
+    },
+  };
+
+  // Dark theme config - 解析所有引用
+  const darkConfig: Config = {
+    log: { verbosity: 'verbose' },
+    source: ['tokens/base/**/*.json', 'tokens/semantic/dark.json'],
+    platforms: {
+      css: {
+        transformGroup: 'css',
+        transforms: ['attribute/cti', 'name/kebab'],
+        buildPath: 'src/tokens/css/',
+        files: [
+          {
+            destination: 'dark.css',
+            format: 'css/variables-resolved',
+          },
+        ],
+      },
+    },
+  };
+
+  const sd = new StyleDictionary(lightConfig);
+  await sd.buildAllPlatforms();
+
+  const sdDark = new StyleDictionary(darkConfig);
+  await sdDark.buildAllPlatforms();
+
+  console.log('✅ Tokens built successfully');
+}
+
+build().catch(error => {
+  console.error('❌ Token build failed:', error);
+  process.exit(1);
+});

package/src/atoms/blink-dot/BlinkDot.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { BlinkDot } from './BlinkDot';
+
+const meta: Meta<typeof BlinkDot> = {
+  title: 'Atoms/BlinkDot',
+  component: BlinkDot,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    status: {
+      control: 'select',
+      options: ['blink', 'still', 'hidden'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    status: 'blink',
+  },
+};
+
+export const Blink: Story = {
+  args: {
+    status: 'blink',
+  },
+};
+
+export const Still: Story = {
+  args: {
+    status: 'still',
+  },
+};
+
+export const Hidden: Story = {
+  args: {
+    status: 'hidden',
+  },
+};

package/src/atoms/blink-dot/BlinkDot.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { twMerge } from 'tailwind-merge';
+
+export type BlinkDotStatus = 'blink' | 'still' | 'hidden';
+
+export interface BlinkDotProps {
+  className?: string;
+  status?: BlinkDotStatus;
+  xOffset?: number; // 水平偏移，单位像素
+  yOffset?: number; // 垂直偏移，单位像素
+}
+
+/**
+ * BlinkDot 组件
+ *
+ * 用于展示状态指示器的闪烁点。
+ */
+export const BlinkDot: React.FC<BlinkDotProps> = ({
+  className,
+  status = 'hidden',
+  xOffset = 0,
+  yOffset = -28,
+}) => {
+  return (
+    <span className="inline-flex justify-center items-center relative">
+      <span
+        className={twMerge(
+          'absolute inline-flex h-full w-full rounded-full',
+          'text-status-error',
+          status === 'blink' && 'animate-ping-fast',
+          status === 'hidden' && 'invisible',
+          className
+        )}
+        style={{
+          left: `${xOffset}px`,
+          top: `${yOffset}px`,
+        }}
+      >
+        .
+      </span>
+    </span>
+  );
+};
+
+BlinkDot.displayName = 'BlinkDot';

package/src/atoms/blink-dot/index.ts

@@ -0,0 +1,2 @@
+export { BlinkDot } from './BlinkDot';
+export type { BlinkDotProps, BlinkDotStatus } from './BlinkDot';

package/src/atoms/button/Button.stories.tsx

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  title: 'Atoms/Button',
+  component: Button,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'primary', 'danger', 'ghost', 'disabled'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    transparent: {
+      control: 'boolean',
+    },
+    loading: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Button',
+    variant: 'default',
+    size: 'md',
+  },
+};
+
+export const Variants: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      <Button variant="default">Default (Normal)</Button>
+      <Button variant="primary">Primary</Button>
+      <Button variant="danger">Danger</Button>
+      <Button variant="ghost">Ghost</Button>
+      <Button variant="disabled">Disabled</Button>
+    </div>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Button size="sm">Small</Button>
+      <Button size="md">Medium</Button>
+      <Button size="lg">Large</Button>
+    </div>
+  ),
+};
+
+export const Transparent: Story = {
+  args: {
+    children: 'Transparent',
+    transparent: true,
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    children: 'Loading',
+    loading: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    children: 'Disabled',
+    disabled: true,
+  },
+};

package/src/atoms/button/Button.tsx

@@ -0,0 +1,59 @@
+import React, { forwardRef, useCallback } from 'react';
+import { buttonVariants } from './Button.variants';
+import { ButtonProps } from './Button.types';
+import { twMerge } from 'tailwind-merge';
+import { BlinkDot } from '../blink-dot';
+
+/**
+ * Button 组件
+ */
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      children,
+      variant = 'default',
+      size = 'md',
+      transparent = false,
+      loading = false,
+      disabled,
+      className,
+      onClick,
+      ...props
+    },
+    ref
+  ) => {
+    // 处理点击事件，添加 280ms 延迟动画（与旧 Button 一致）
+    const handleClick = useCallback(
+      (e: React.MouseEvent<HTMLButtonElement>) => {
+        if (variant === 'disabled' || disabled || loading) {
+          return;
+        }
+
+        onClick?.(e);
+      },
+      [variant, disabled, loading, onClick]
+    );
+
+    return (
+      <button
+        ref={ref}
+        className={twMerge(
+          buttonVariants({
+            variant: disabled || loading ? 'disabled' : variant,
+            size,
+            transparent: transparent,
+          }),
+          className
+        )}
+        disabled={disabled || loading}
+        onClick={handleClick}
+        {...props}
+      >
+        {children}
+        {loading && <BlinkDot status="blink" xOffset={2} />}
+      </button>
+    );
+  }
+);
+
+Button.displayName = 'Button';

package/src/atoms/button/Button.types.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ButtonVariants } from './Button.variants';
+
+/**
+ * Button 组件 Props
+ * 继承原生 button 属性，避免破坏原生行为
+ */
+export interface ButtonProps
+  extends
+    Omit<ButtonVariants, 'transparent'>,
+    Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'size'> {
+  /** 按钮内容 */
+  children: React.ReactNode;
+  /** 加载状态 */
+  loading?: boolean;
+  /** 自定义类名 */
+  className?: string;
+  /** 透明模式（无阴影） */
+  transparent?: boolean;
+}