@arronqzy/ui 0.0.0 → 1.0.2

package/README.md

@@ -0,0 +1,63 @@
+# @arronqzy/ui
+
+Abuilder 的**共享 UI 组件库**，基于 [shadcn/ui](https://ui.shadcn.com/) + Radix UI + Tailwind CSS，为编辑器与蓝图提供统一视觉与交互。
+
+## 功能概览
+
+- **基础组件**：Button、Input、Dialog、Dropdown、Tabs、Tooltip、Toast 等
+- **表单**：与 `react-hook-form`、`zod` 集成的表单控件
+- **布局**：Resizable Panels、ScrollArea、Separator
+- **主题**：`ThemeProvider` 支持亮/暗色与 `class` 策略
+- **层级管理**：`UI_Z_INDEX` / `MODAL_Z_INDEX` 统一浮层 z-index
+- **图表**：封装 Recharts 常用图表（按需使用）
+
+## 安装
+
+```bash
+pnpm add @arronqzy/ui
+```
+
+```ts
+import "@arronqzy/ui/styles.css";
+```
+
+## 使用
+
+```tsx
+import { ThemeProvider, Button, toast } from "@arronqzy/ui";
+import "@arronqzy/ui/styles.css";
+
+function App() {
+  return (
+    <ThemeProvider defaultTheme="dark">
+      <Button onClick={() => toast({ title: "Hello" })}>点击</Button>
+    </ThemeProvider>
+  );
+}
+```
+
+### 工具函数
+
+```ts
+import { cn } from "@arronqzy/ui";
+import { UI_Z_INDEX } from "@arronqzy/ui";
+```
+
+## 导出说明
+
+- `@arronqzy/ui` — 全部组件、`cn`、`ThemeProvider`、`useToast`
+- `@arronqzy/ui/styles.css` — 编译后的 Tailwind 样式
+
+组件源码位于 `src/ui/`，遵循 shadcn 可组合模式，可按需在本包内扩展。
+
+## 构建样式
+
+```bash
+pnpm -C packages/ui build:css
+```
+
+依赖 `@arronqzy/tailwind` 预设保持与设计令牌一致。
+
+## 许可证
+
+MIT

package/dist/styles.css

@@ -754,14 +754,14 @@ body {
   z-index: 10000;
 }
 
-.z-\[100\] {
-  z-index: 100;
-}
-
 .z-\[1\] {
   z-index: 1;
 }
 
+.z-toast {
+  z-index: 99999;
+}
+
 .-mx-1 {
   margin-left: -0.25rem;
   margin-right: -0.25rem;
@@ -2300,6 +2300,10 @@ body {
   pointer-events: none;
 }
 
+.data-\[state\=closed\]\:pointer-events-none[data-state="closed"] {
+  pointer-events: none;
+}
+
 .data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction="vertical"] {
   height: 1px;
 }
@@ -2769,18 +2773,6 @@ body {
 }
 
 @media (min-width: 640px) {
-  .sm\:bottom-0 {
-    bottom: 0px;
-  }
-
-  .sm\:right-0 {
-    right: 0px;
-  }
-
-  .sm\:top-auto {
-    top: auto;
-  }
-
   .sm\:mt-0 {
     margin-top: 0px;
   }
@@ -2793,10 +2785,6 @@ body {
     flex-direction: row;
   }
 
-  .sm\:flex-col {
-    flex-direction: column;
-  }
-
   .sm\:justify-end {
     justify-content: flex-end;
   }
@@ -2818,10 +2806,6 @@ body {
   .sm\:text-left {
     text-align: left;
   }
-
-  .data-\[state\=open\]\:sm\:slide-in-from-bottom-full[data-state="open"] {
-    --tw-enter-translate-y: 100%;
-  }
 }
 
 @media (min-width: 768px) {

package/index.ts

@@ -2,6 +2,6 @@
 
 export * from "./src/ui/index";
 export * from "./src/lib/utils";
-export { MODAL_Z_INDEX } from "./src/lib/overlay-z-index";
+export { MODAL_Z_INDEX, UI_Z_INDEX } from "./src/lib/overlay-z-index";
 export * from "./src/hooks/use-toast";
 export * from "./src/theme-provider";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/ui",
-  "version": "0.0.0",
+  "version": "1.0.2",
   "exports": {
     ".": "./index.ts",
     "./counter": "./components/counter.ts",
@@ -63,8 +63,8 @@
     "eslint": "^8.57.0",
     "typescript": "^5.5.4",
     "@arronqzy/eslint-config": "0.0.0",
-    "@arronqzy/typescript-config": "0.0.0",
-    "@arronqzy/tailwind": "0.0.1"
+    "@arronqzy/tailwind": "1.0.2",
+    "@arronqzy/typescript-config": "1.0.0"
   },
   "scripts": {
     "lint": "eslint \"**/*.{ts,tsx}\"",

package/src/lib/overlay-z-index.ts

@@ -1,8 +1,23 @@
 import type { CSSProperties } from "react";
 
-/** 弹窗层级：高于画布 Ruler(999)、工具栏(1200)、Menubar(10100) 等 */
-export const MODAL_Z_INDEX = 20000;
-export const MODAL_CONTENT_Z_INDEX = 20001;
+/** 全局浮层 z-index 刻度 */
+export const UI_Z_INDEX = {
+  tooltip: 10000,
+  dropdown: 10100,
+  popover: 10120,
+  alertDialog: 10150,
+  /** 弹窗：高于画布 Ruler、工具栏、Menubar 等 */
+  modal: 20000,
+  modalContent: 20001,
+  /** Toast 通知：始终置于最顶层 */
+  toast: 99999,
+} as const;
 
-export const modalOverlayStyle: CSSProperties = { zIndex: MODAL_Z_INDEX };
-export const modalContentStyle: CSSProperties = { zIndex: MODAL_CONTENT_Z_INDEX };
+/** @deprecated 使用 UI_Z_INDEX.modal */
+export const MODAL_Z_INDEX = UI_Z_INDEX.modal;
+
+/** @deprecated 使用 UI_Z_INDEX.modalContent */
+export const MODAL_CONTENT_Z_INDEX = UI_Z_INDEX.modalContent;
+
+export const modalOverlayStyle: CSSProperties = { zIndex: UI_Z_INDEX.modal };
+export const modalContentStyle: CSSProperties = { zIndex: UI_Z_INDEX.modalContent };

package/src/ui/sonner.tsx

@@ -10,6 +10,8 @@ import {
 import { useTheme } from "next-themes"
 import { Toaster as Sonner } from "sonner"
 
+import { UI_Z_INDEX } from "../lib/overlay-z-index"
+
 type ToasterProps = React.ComponentProps<typeof Sonner>
 
 const Toaster = ({ ...props }: ToasterProps) => {
@@ -19,6 +21,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
     <Sonner
       theme={theme as ToasterProps["theme"]}
       className="toaster group"
+      style={{ zIndex: UI_Z_INDEX.toast }}
       icons={{
         success: <CircleCheck className="h-4 w-4" />,
         info: <Info className="h-4 w-4" />,

package/src/ui/toast.tsx

@@ -6,6 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { X } from "lucide-react"
 
 import { cn } from "../lib/utils"
+import { UI_Z_INDEX } from "../lib/overlay-z-index"
 
 const ToastProvider = ToastPrimitives.Provider
 
@@ -15,8 +16,9 @@ const ToastViewport = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Viewport
     ref={ref}
+    style={{ zIndex: UI_Z_INDEX.toast }}
     className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      "pointer-events-none fixed top-0 right-0 z-toast flex max-h-screen w-full flex-col gap-2 p-4 md:max-w-[420px]",
       className
     )}
     {...props}
@@ -25,7 +27,7 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 
 const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  "group pointer-events-auto data-[state=closed]:pointer-events-none relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full",
   {
     variants: {
       variant: {

package/src/ui/toaster.tsx

@@ -1,5 +1,7 @@
 "use client"
 
+import { createPortal } from "react-dom"
+
 import { useToast } from "../hooks/use-toast"
 import {
   Toast,
@@ -13,8 +15,10 @@ import {
 export function Toaster() {
   const { toasts } = useToast()
 
-  return (
-    <ToastProvider>
+  if (typeof document === "undefined") return null
+
+  return createPortal(
+    <ToastProvider swipeDirection="right">
       {toasts.map(function ({ id, title, description, action, ...props }) {
         return (
           <Toast key={id} {...props}>
@@ -30,6 +34,7 @@ export function Toaster() {
         )
       })}
       <ToastViewport />
-    </ToastProvider>
+    </ToastProvider>,
+    document.body
   )
 }

package/.turbo/turbo-lint.log

@@ -1,4 +0,0 @@
-
-> @arron/ui@0.0.0 lint /Users/arron/program/project/opensource/Abuilder26/packages/ui
-> eslint "**/*.{ts,tsx}"
-