@zmzai/theme 0.2.1 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zmzai/theme",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "private": false,
   "type": "module",
   "description": "zmzai 全品牌设计系统 — Radix UI + framer-motion + Tailwind v4 + MiSans",

package/src/components/icon-button/IconButton.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { forwardRef, type ButtonHTMLAttributes } from "react";
+import { cn } from "../../utils/cn";
+
+export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "ref"> {
+  /** 尺寸：sm=h-6 md=h-7 lg=h-8（密集工具条场景，不做 hover 缩放） */
+  size?: "sm" | "md" | "lg";
+  /** 视觉：ghost=透明 hover 背景；quiet=无 hover 背景只有颜色变化 */
+  tone?: "ghost" | "quiet";
+  label?: string;
+}
+
+/**
+ * IconButton — 密集场景的纯图标按钮。
+ *
+ * 与 Button 的区别：不做 framer-motion hover 缩放（工具条里会跳），
+ * 尺寸更小（6/7/8），tone=quiet 时连背景都没有（纯颜色 hover）。
+ *
+ * @example
+ * <IconButton label="重命名"><Icon name="edit" size={12} /></IconButton>
+ */
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  ({ className, size = "md", tone = "ghost", label, type = "button", ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        type={type}
+        aria-label={label}
+        title={label}
+        className={cn(
+          "inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm text-ink-3 transition-colors disabled:pointer-events-none disabled:opacity-40",
+          size === "sm" && "h-6 w-6",
+          size === "md" && "h-7 w-7",
+          size === "lg" && "h-8 w-8",
+          tone === "ghost" && "hover:bg-surface-2 hover:text-ink",
+          tone === "quiet" && "hover:text-ink",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+IconButton.displayName = "IconButton";

package/src/components/icon-button/index.ts

@@ -0,0 +1,2 @@
+export { IconButton } from "./IconButton";
+export type { IconButtonProps } from "./IconButton";

package/src/components/index.ts

@@ -13,6 +13,8 @@ export * from "./tooltip";
 export * from "./dialog";
 export * from "./dropdown-menu";
 export * from "./select";
+export * from "./icon-button";
+export * from "./tabs";
 
 // === Interactive Enhancement ===
 export * from "./magnetic-button";

package/src/components/tabs/Tabs.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { cn } from "../../utils/cn";
+
+export type TabItem = { value: string; label: React.ReactNode; count?: number };
+
+export interface TabsProps {
+  items: TabItem[];
+  value: string;
+  onValueChange: (value: string) => void;
+  className?: string;
+}
+
+/**
+ * Tabs — 下划线激活态的水平标签栏（锐角风）。
+ *
+ * @example
+ * <Tabs items={[{value:"a",label:"产物",count:2},{value:"b",label:"改动"}]} value={tab} onValueChange={setTab} />
+ */
+export function Tabs({ items, value, onValueChange, className }: TabsProps) {
+  return (
+    <div className={cn("flex gap-0 border-b border-line", className)} role="tablist">
+      {items.map((item) => {
+        const active = item.value === value;
+        return (
+          <button
+            key={item.value}
+            type="button"
+            role="tab"
+            aria-selected={active}
+            className={cn(
+              "cursor-pointer border-b-2 px-3 py-2.5 text-xs font-medium transition-colors",
+              active ? "border-ink text-ink" : "border-transparent text-ink-3 hover:text-ink-2",
+            )}
+            onClick={() => onValueChange(item.value)}
+          >
+            {item.label}
+            {typeof item.count === "number" && (
+              <span className="ml-1 rounded-full bg-surface-2 px-1.5 text-[10px]">{item.count}</span>
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/tabs/index.ts

@@ -0,0 +1,2 @@
+export { Tabs } from "./Tabs";
+export type { TabItem, TabsProps } from "./Tabs";