Support both Emotion CSS-in-JS and Pure CSS styling when use this library

[zoubingwu]

Umbrella Issue: CSS Modules Migration & Emotion Extraction

Objective: Default UI Kit uses CSS Modules with zero Emotion dependency. Emotion support is kept as an optional bundle under @tidbcloud/uikit/emotion.

---

Goals

• Default consumption path ships CSS Modules + static styles; no Emotion requirement.
• All Emotion-specific utilities (ThemeProvider, sx/styles, caches) are exported from @tidbcloud/uikit/emotion only.
• Maintain functional parity for all components in both CSS and Emotion flows.
• Keep bundle size predictable and simplify dependency expectations for app teams.

Non-Goals

• Introducing new visual designs or theme tokens.
• Changing component APIs beyond what is needed to remove Emotion coupling.

Scope & Deliverables

• CSS-first core: Components rendered via .module.css, CSS variables for theming, no createStyles.
• Emotion bundle: Dedicated entry @tidbcloud/uikit/emotion that exposes the Emotion-backed ThemeProvider, stylesTransform, and any Emotion-specific helpers.
• Build/exports: Package exports updated to remove the @tidbcloud/uikit/theme vs @tidbcloud/uikit/theme/css split; keep a single CSS-first theme entry and the Emotion bundle at @tidbcloud/uikit/emotion.
• Docs: Clear install/usage guidance for both modes and migration notes for consumers.

Key Decisions

• CSS mode is the default. Apps that want Emotion must import from @tidbcloud/uikit/emotion.
• Emotion dependencies become optional peers; CSS-only installs should not pull them.
• Theme variables remain shared; CSS mode uses static styles while Emotion mode can opt into dynamic styling APIs.

Work Items

• Infra
  • Ensure build supports CSS Modules everywhere; remove residual createStyles usage.
  • Wire CSS variables pipeline for theme tokens.
• Component migrations
  • biz/TransferTree → .module.css
  • biz/PhoneInput → .module.css
  • primitive/Prism → CSS variables for dynamic params
  • biz/Tree → static overrides, drop Global/useCss
  • DateTimePicker/TimeScrollerPicker → CSS Modules + vars
• Theme layer
  • Create CSS-first ThemeProvider (default export path).
  • Create Emotion ThemeProvider and colocate all Emotion helpers under @tidbcloud/uikit/emotion.
  • Verify type exports for both entries.
• Packaging
  • Update packages/uikit/package.json exports to use the new entries (CSS default, Emotion at @tidbcloud/uikit/emotion).
  • Set Emotion deps as optional peerDependencies.
  • Build/test both bundles.
• Testing
  • Unit coverage for CSS mode
  • Unit coverage for Emotion mode
  • Integration: vite and nextjs examples
• Documentation
  • Update Getting Started / migration guide to explain the new entries.
  • Note deprecation of @tidbcloud/uikit/theme split in favor of @tidbcloud/uikit/emotion.

Risks & Notes

• Divergence between CSS and Emotion visual output; needs visual regression checks.
• Third-party styles (e.g., rc-tree) must be reconciled with CSS variable theme tokens.
• Consumers might rely on sx in existing code; migration guide must highlight @tidbcloud/uikit/emotion for that path.

Definition of Done

• Build succeeds with Emotion dependencies absent.
• Emotion bundle works when @emotion/* + @mantine/emotion are installed.
• Docs published with clear import/install instructions and migration steps.