@bbki.ng/ui 0.1.1

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

@@ -0,0 +1,58 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+/**
+ * Button 变体定义
+ */
+export const buttonVariants = cva(
+  [
+    'inline-flex items-center justify-center',
+    'font-sans font-medium',
+    'transition-all duration-300 ease-in-out',
+    'active:not([disabled]):scale-[0.95]',
+  ],
+  {
+    variants: {
+      variant: {
+        default: [
+          'text-content-primary',
+          'bg-transparent',
+          'shadow-[var(--shadow-button-hover)]',
+          'hover:shadow-[var(--shadow-button)]',
+          'active:shadow-[var(--shadow-none)]',
+        ],
+        primary: [
+          'text-content-action',
+          'bg-transparent',
+          'shadow-[var(--shadow-button-hover)]',
+          'hover:shadow-[var(--shadow-button)]',
+          'active:shadow-[var(--shadow-none)]',
+        ],
+        danger: [
+          'text-content-danger',
+          'bg-transparent',
+          'shadow-[var(--shadow-button-hover)]',
+          'hover:shadow-[var(--shadow-button)]',
+          'active:shadow-[var(--shadow-none)]',
+        ],
+        ghost: ['text-content-primary', 'bg-transparent', 'shadow-none'],
+        disabled: ['text-content-disabled', 'bg-transparent', 'cursor-not-allowed', 'shadow-none'],
+      },
+      size: {
+        sm: 'py-4 px-4',
+        md: 'py-4 px-8',
+        lg: 'py-4 px-8',
+      },
+      transparent: {
+        true: 'shadow-none pointer-events-none',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+      transparent: false,
+    },
+  }
+);
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>;

package/src/atoms/button/index.ts

@@ -0,0 +1,3 @@
+export { Button } from './Button';
+export type { ButtonProps } from './Button.types';
+export { buttonVariants } from './Button.variants';

package/src/atoms/link/Link.stories.tsx

@@ -0,0 +1,121 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MemoryRouter } from 'react-router-dom';
+import { Link } from './Link';
+
+const meta: Meta<typeof Link> = {
+  title: 'Atoms/Link',
+  component: Link,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'danger', 'muted'],
+      description: '链接样式变体',
+    },
+    external: {
+      control: 'boolean',
+      description: '是否为外部链接',
+    },
+    readonly: {
+      control: 'boolean',
+      description: '只读模式',
+    },
+    status: {
+      control: 'select',
+      options: ['blink', 'still', 'hidden'],
+      description: 'BlinkDot 状态指示器',
+    },
+    to: {
+      control: 'text',
+      description: '链接地址',
+    },
+  },
+  decorators: [
+    Story => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Default Link',
+    to: '/foo/bar',
+    variant: 'default',
+  },
+};
+
+export const Variants: Story = {
+  render: () => (
+    <div className="flex gap-6">
+      <Link to="/" variant="default">
+        Default (Action)
+      </Link>
+      <Link to="/" variant="danger">
+        Danger
+      </Link>
+      <Link to="/" variant="muted">
+        Muted
+      </Link>
+      <Link to="/" variant="special">
+        Special
+      </Link>
+    </div>
+  ),
+};
+
+export const External: Story = {
+  args: {
+    children: 'External Link',
+    to: 'https://bbki.ng',
+    external: true,
+    variant: 'default',
+  },
+};
+
+export const Readonly: Story = {
+  args: {
+    children: 'Read Only Text',
+    to: '/',
+    readonly: true,
+  },
+};
+
+export const WithStatus: Story = {
+  render: () => (
+    <div className="flex gap-6">
+      <Link to="/" status="blink">
+        Blinking Status
+      </Link>
+      <Link to="/" status="still">
+        Still Status
+      </Link>
+      <Link to="/" status="hidden">
+        Hidden Status
+      </Link>
+    </div>
+  ),
+};
+
+export const SpecialContent: Story = {
+  args: {
+    children: '小乌鸦',
+    to: '/',
+    variant: 'special',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: '当链接内容包含 "小乌鸦" 时，自动使用 danger 样式',
+      },
+    },
+  },
+};

package/src/atoms/link/Link.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Link as BaseLink } from 'react-router-dom';
+import { twMerge } from 'tailwind-merge';
+import { linkVariants } from './Link.variants';
+import { LinkProps } from './Link.types';
+import { BlinkDot } from '../blink-dot';
+
+/**
+ * Link 组件
+ *
+ * 支持内部路由链接、外部链接和只读模式。
+ * 使用语义化颜色 token，自动适配 light/dark 主题。
+ *
+ * @example
+ * <Link to="/about">About Page</Link>
+ * <Link to="https://example.com" external>External Link</Link>
+ * <Link to="/" readonly>Read Only</Link>
+ */
+export const Link: React.FC<LinkProps> = ({
+  to,
+  variant = 'default',
+  external,
+  className,
+  children,
+  status,
+  readonly,
+  ...rest
+}) => {
+  // 特殊逻辑：如果内容包含 "小乌鸦"，使用 danger 样式
+  const isSpecialContent = typeof children === 'string' && children.includes('小乌鸦');
+  const effectiveVariant = isSpecialContent ? 'special' : variant;
+
+  const linkCls = twMerge(linkVariants({ variant: effectiveVariant }), className);
+
+  // 只读模式：显示为静态文本
+  if (readonly) {
+    const isNonEnName = typeof children === 'string' && !/^[a-zA-Z~]+$/.test(children);
+    const offsetCls = isNonEnName ? 'relative top-[2px]' : '';
+    return (
+      <>
+        <span className={twMerge('text-content-secondary', 'inline-block', offsetCls, 'p-2')}>
+          {children}
+        </span>
+        <BlinkDot status={status} />
+      </>
+    );
+  }
+
+  // 外部链接：使用 <a> 标签
+  if (external) {
+    return (
+      <a href={to} className={linkCls} target="_blank" rel="noreferrer" {...rest}>
+        {children}
+      </a>
+    );
+  }
+
+  // 内部链接：使用 react-router-dom 的 Link
+  return (
+    <>
+      <BaseLink to={to} className={linkCls} {...rest}>
+        {children}
+        <BlinkDot status={status} />
+      </BaseLink>
+    </>
+  );
+};
+
+Link.displayName = 'Link';

package/src/atoms/link/Link.types.ts

@@ -0,0 +1,26 @@
+import type { LinkVariants } from './Link.variants';
+
+/**
+ * Link status for BlinkDot indicator
+ */
+export type LinkStatus = 'blink' | 'still' | 'hidden';
+
+/**
+ * Link component Props
+ * 继承 react-router-dom 的 Link 属性
+ */
+export interface LinkProps
+  extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>, LinkVariants {
+  /** 链接地址 */
+  to: string;
+  /** 自定义类名 */
+  className?: string;
+  /** 是否外部链接 */
+  external?: boolean;
+  /** 是否只读模式（不显示为链接） */
+  readonly?: boolean;
+  /** BlinkDot 状态 */
+  status?: LinkStatus;
+  /** 链接内容 */
+  children?: React.ReactNode;
+}

package/src/atoms/link/Link.variants.ts

@@ -0,0 +1,55 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+/**
+ * Link 变体定义
+ * 使用语义化颜色 token，支持 light/dark 主题切换
+ */
+export const linkVariants = cva(
+  [
+    'inline-block',
+    'rounded-sm',
+    'no-underline!',
+    'transition-all duration-200 ease-in-out',
+    'active:scale-[0.97]',
+    'p-2',
+  ],
+  {
+    variants: {
+      variant: {
+        default: [
+          // 默认链接样式 - 使用 action 颜色（蓝色系）
+          'text-content-action',
+          'md:not-focus:hover:bg-secondary',
+          'md:not-focus:hover:text-content-action',
+          'focus:bg-secondary',
+        ],
+        danger: [
+          // 危险/强调样式 - 使用 danger 颜色（粉色/红色系）
+          'text-content-danger',
+          'md:not-focus:hover:bg-accent/50',
+          'md:not-focus:hover:text-content-danger',
+          'focus:bg-accent/50',
+        ],
+        special: [
+          // use special color
+          'text-content-special',
+          'md:not-focus:hover:bg-special',
+          'md:not-focus:hover:text-content-special',
+          'focus:bg-special',
+        ],
+        muted: [
+          // 弱化样式 - 使用 secondary 颜色（灰色系）
+          'text-content-secondary',
+          'md:not-focus:hover:bg-muted',
+          'md:not-focus:hover:text-content-secondary',
+          'focus:bg-muted',
+        ],
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export type LinkVariants = VariantProps<typeof linkVariants>;

package/src/atoms/link/index.ts

@@ -0,0 +1,3 @@
+export { Link } from './Link';
+export type { LinkProps, LinkStatus } from './Link.types';
+export { linkVariants } from './Link.variants';

package/src/atoms/logo/Logo.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Logo } from './Logo';
+
+const meta: Meta<typeof Logo> = {
+  title: 'Atoms/Logo',
+  component: Logo,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const Colored: Story = {
+  args: {
+    className: 'text-content-primary',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    className: 'text-content-secondary',
+  },
+};
+
+export const Clickable: Story = {
+  args: {
+    className: 'text-content-action cursor-pointer hover:opacity-80',
+    onClick: () => alert('Logo clicked!'),
+  },
+};

package/src/atoms/logo/Logo.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { LogoProps } from './Logo.types';
+import { twMerge } from 'tailwind-merge';
+
+export const Logo = React.memo(
+  (props: LogoProps) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="currentColor"
+      onClick={props.onClick}
+      className={twMerge(props.className, 'text-logo')}
+    >
+      <path
+        d="M29.1152 21.3106C32.0605 21.3106 34.4481 18.9101 34.4481 15.9489V24.6457C34.4481 25.7585 33.5508 26.6607 32.444 26.6607H15.1207C14.0138 26.6607 13.1166 25.7585 13.1166 24.6457V15.9489C13.1166 18.9101 15.5042 21.3106 18.4494 21.3106C21.3947 21.3106 23.7823 18.9101 23.7823 15.9489C23.7823 18.9101 26.17 21.3106 29.1152 21.3106Z"
+        className="fill-current"
+      />
+      <path
+        d="M23.7823 15.9373L23.7823 15.9489C23.7823 15.9451 23.7823 15.9412 23.7823 15.9373Z"
+        className="fill-current"
+      />
+      <path
+        d="M23.1143 28.004C23.1205 30.9598 25.5057 33.3541 28.4472 33.3541C31.3886 33.3541 33.7738 30.9598 33.7801 28.004H23.1143Z"
+        className="fill-current"
+      />
+      <path
+        d="M13.7846 28.004C13.7846 28.0079 13.7846 28.0117 13.7846 28.0156C13.7908 30.9714 16.1761 33.3657 19.1175 33.3657C22.0589 33.3657 24.4442 30.9714 24.4504 28.0156H13.7846V28.004Z"
+        className="fill-current"
+      />
+      <path
+        d="M14.4527 15.9373C14.4527 16.6792 13.8545 17.2806 13.1166 17.2806C12.3786 17.2806 11.7805 16.6792 11.7805 15.9373C11.7805 15.1954 12.3786 14.594 13.1166 14.594C13.8545 14.594 14.4527 15.1954 14.4527 15.9373Z"
+        className="fill-current"
+      />
+      <path
+        d="M25.1184 15.2657C25.1184 16.0076 24.5202 16.609 23.7823 16.609C23.0444 16.609 22.4462 16.0076 22.4462 15.2657C22.4462 14.5238 23.0444 13.9224 23.7823 13.9224C24.5202 13.9224 25.1184 14.5238 25.1184 15.2657Z"
+        className="fill-current"
+      />
+      <path
+        d="M35.7842 15.9373C35.7842 16.6792 35.186 17.2806 34.4481 17.2806C33.7102 17.2806 33.112 16.6792 33.112 15.9373C33.112 15.1954 33.7102 14.594 34.4481 14.594C35.186 14.594 35.7842 15.1954 35.7842 15.9373Z"
+        className="fill-current"
+      />
+    </svg>
+  ),
+  () => true
+);
+
+Logo.displayName = 'Logo';

package/src/atoms/logo/Logo.types.ts

@@ -0,0 +1,4 @@
+export interface LogoProps {
+  className?: string;
+  onClick?: () => void;
+}

package/src/atoms/logo/index.ts

@@ -0,0 +1,2 @@
+export { Logo } from './Logo';
+export type { LogoProps } from './Logo.types';

package/src/index.ts

@@ -0,0 +1,54 @@
+// Theme system
+export { ThemeProvider, useTheme } from './theme';
+export type { Theme, ThemeContextValue } from './theme';
+
+// Atoms
+export { Button, buttonVariants } from './atoms/button';
+export type { ButtonProps } from './atoms/button';
+export { BlinkDot } from './atoms/blink-dot';
+export type { BlinkDotProps, BlinkDotStatus } from './atoms/blink-dot';
+export { Link, linkVariants } from './atoms/link';
+export type { LinkProps, LinkStatus } from './atoms/link';
+export { Logo } from './atoms/logo';
+export type { LogoProps } from './atoms/logo';
+
+// Layout
+export { Container } from './layout/container';
+export type { ContainerProps } from './layout/container';
+export { Grid } from './layout/grid';
+export type { GridProps } from './layout/grid';
+
+// Molecules
+export { Breadcrumb } from './molecules/breadcrumb';
+export type { BreadcrumbProps, PathObj } from './molecules/breadcrumb';
+export { Panel } from './molecules/panel';
+export type { PanelProps } from './molecules/panel';
+export { Table } from './molecules/table';
+export type { TableProps, TableHCellProps, TableCellProps } from './molecules/table';
+export { List, TitledList, LinkList } from './molecules/list';
+export type { ListProps, TitledListProps, LinkListProps } from './molecules/list';
+export { Article } from './molecules/article';
+export type { ArticleProps } from './molecules/article';
+export { Nav } from './molecules/nav';
+export type { NavProps } from './molecules/nav';
+
+// Organisms
+export { Page, ErrorBoundary, NotFound, Error } from './organisms/page';
+export type {
+  PageProps,
+  ErrorBoundaryProps,
+  ErrorBoundaryState,
+  ErrorProps,
+  NotFoundProps,
+} from './organisms/page';
+export { DropZone } from './organisms/drop-zone';
+export type { DropZoneProps } from './organisms/drop-zone';
+export { DropImage, useDropImage } from './organisms/drop-image';
+export type { DropImageProps, ImagePreviewerProps } from './organisms/drop-image';
+export { Canvas, useRenderer } from './organisms/canvas';
+export type { CanvasProps, AttributeProps, UniformProps } from './organisms/canvas';
+export { LoadingSpiral } from './organisms/loading-spiral';
+export type { LoadingSpiralProps } from './organisms/loading-spiral';
+
+// Styles (side effect import)
+import './styles.css';

package/src/layout/container/Container.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Container } from './Container';
+
+const meta: Meta<typeof Container> = {
+  title: 'Layout/Container',
+  component: Container,
+  tags: ['autodocs'],
+  argTypes: {
+    maxWidth: {
+      control: 'select',
+      options: ['sm', 'md', 'lg', 'xl', 'full'],
+    },
+    padding: {
+      control: 'select',
+      options: ['none', 'sm', 'md', 'lg'],
+    },
+    centered: {
+      control: 'boolean',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <div className="h-32 bg-[var(--semantic-color-muted)] rounded flex items-center justify-center">
+        Container Content
+      </div>
+    ),
+    maxWidth: 'lg',
+    padding: 'md',
+  },
+};
+
+export const MaxWidths: Story = {
+  render: () => (
+    <div className="space-y-4 w-full">
+      {(['sm', 'md', 'lg', 'xl'] as const).map(size => (
+        <Container
+          key={size}
+          maxWidth={size}
+          className="border border-dashed border-[var(--semantic-color-border)]"
+        >
+          <div className="h-16 bg-[var(--semantic-color-muted)] rounded flex items-center px-4 text-[var(--semantic-color-foreground)]">
+            maxWidth: {size}
+          </div>
+        </Container>
+      ))}
+    </div>
+  ),
+};
+
+export const PaddingVariations: Story = {
+  render: () => (
+    <div className="space-y-4 w-full">
+      {(['none', 'sm', 'md', 'lg'] as const).map(pad => (
+        <Container
+          key={pad}
+          maxWidth="lg"
+          padding={pad}
+          className="border border-dashed border-[var(--semantic-color-border)]"
+        >
+          <div className="h-16 bg-[var(--semantic-color-muted)] rounded flex items-center px-4 text-[var(--semantic-color-foreground)]">
+            padding: {pad}
+          </div>
+        </Container>
+      ))}
+    </div>
+  ),
+};

package/src/layout/container/Container.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { twMerge } from 'tailwind-merge';
+
+export interface ContainerProps {
+  children: React.ReactNode;
+  className?: string;
+  /** 最大宽度约束 */
+  maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  /** 内边距 */
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+  /** 居中对齐 */
+  centered?: boolean;
+}
+
+const maxWidthMap = {
+  sm: 'max-w-[640px]',
+  md: 'max-w-[768px]',
+  lg: 'max-w-[1024px]',
+  xl: 'max-w-[1280px]',
+  full: 'max-w-none',
+};
+
+const paddingMap = {
+  none: 'px-0',
+  sm: 'px-4',
+  md: 'px-6',
+  lg: 'px-8',
+};
+
+/**
+ * Container 布局组件
+ *
+ * 提供响应式最大宽度和一致的内边距。
+ */
+export const Container: React.FC<ContainerProps> = ({
+  children,
+  className,
+  maxWidth = 'lg',
+  padding = 'md',
+  centered = true,
+}) => {
+  return (
+    <div
+      className={twMerge(
+        'w-full',
+        maxWidthMap[maxWidth],
+        paddingMap[padding],
+        centered && 'mx-auto',
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+Container.displayName = 'Container';

package/src/layout/container/index.ts

@@ -0,0 +1,2 @@
+export { Container } from './Container';
+export type { ContainerProps } from './Container';