@zmzai/theme 0.2.0 → 0.2.2

package/package.json

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

package/src/components/badge/Badge.tsx

@@ -5,7 +5,7 @@ import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn";
 
 export const badgeVariants = cva(
-  "inline-flex items-center gap-1.5 rounded-full font-medium text-xs whitespace-nowrap",
+  "inline-flex items-center gap-1.5 rounded-sm font-medium text-xs whitespace-nowrap",
   {
     variants: {
       variant: {

package/src/components/button/button.styles.ts

@@ -4,13 +4,13 @@ import { cva } from "class-variance-authority";
  * Button variant styles.
  *
  * Design:
- * - All variants use pill radius (rounded-full)
+ * - 锐角 2px（v0.2 暖纸风），hover 轻微缩放
  * - primary: black fill, white text, hover scale + shadow
  * - secondary: transparent, border, hover fill
  * - ghost: no border, subtle hover bg
  */
 export const buttonVariants = cva(
-  "inline-flex cursor-pointer items-center justify-center gap-2 rounded-full font-semibold transition-colors transition-transform disabled:pointer-events-none disabled:opacity-40 select-none",
+  "inline-flex cursor-pointer items-center justify-center gap-2 rounded-sm font-semibold transition-colors transition-transform disabled:pointer-events-none disabled:opacity-40 select-none",
   {
     variants: {
       variant: {

package/src/components/card/card.styles.ts

@@ -8,7 +8,7 @@ import { cva } from "class-variance-authority";
  * - interactive: hover lifts up + shadow + border darkens
  */
 export const cardVariants = cva(
-  "bg-bg border rounded-xl transition-colors transition-transform duration-200",
+  "bg-bg border rounded-sm transition-colors transition-transform duration-200",
   {
     variants: {
       variant: {

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/input/input.styles.ts

@@ -13,9 +13,9 @@ export const inputVariants = cva(
     variants: {
       variant: {
         default:
-          "border border-line rounded-lg px-4 py-2.5 text-sm focus:border-ink",
+          "border border-line rounded-sm px-4 py-2.5 text-sm focus:border-ink",
         brutal:
-          "border-2 border-ink rounded-xl px-4 py-3 text-sm shadow-[4px_4px_0_var(--color-ink)] focus:shadow-[6px_6px_0_var(--color-accent)] focus:border-accent focus:-translate-x-px focus:-translate-y-px",
+          "border-2 border-ink rounded-sm px-4 py-3 text-sm",
       },
       size: {
         sm: "text-xs py-2 px-3",

package/src/components/select/Select.tsx

@@ -18,7 +18,7 @@ export function SelectTrigger({
   return (
     <SelectPrimitive.Trigger
       className={cn(
-        "inline-flex h-9 items-center justify-between gap-2 rounded-lg border border-line bg-bg px-3 py-2 text-sm font-medium text-ink outline-none transition-colors",
+        "inline-flex h-9 items-center justify-between gap-2 rounded-sm border border-line bg-bg px-3 py-2 text-sm font-medium text-ink outline-none transition-colors",
         "hover:border-ink/40 focus:border-ink data-[placeholder]:text-ink-3",
         className
       )}
@@ -48,7 +48,7 @@ export function SelectContent({
         position={position}
         sideOffset={4}
         className={cn(
-          "z-50 min-w-[8rem] overflow-hidden rounded-lg border border-line bg-bg p-1 shadow-lg",
+          "z-50 min-w-[8rem] overflow-hidden rounded-sm border border-line bg-bg p-1 shadow-lg",
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
           className

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";

package/src/components/textarea/Textarea.tsx

@@ -25,9 +25,9 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         className={cn(
           "w-full resize-none bg-bg font-sans text-ink placeholder:text-ink-3 outline-none transition-all",
           variant === "default" &&
-            "border border-line rounded-lg px-4 py-2.5 text-sm focus:border-ink",
+            "border border-line rounded-sm px-4 py-2.5 text-sm focus:border-ink",
           variant === "brutal" &&
-            "border-2 border-ink rounded-xl px-4 py-3 text-sm shadow-[4px_4px_0_var(--color-ink)] focus:shadow-[6px_6px_0_var(--color-accent)] focus:border-accent focus:-translate-x-px focus:-translate-y-px",
+            "border-2 border-ink rounded-sm px-4 py-3 text-sm",
           className
         )}
         {...props}