@orbit-work/ui 0.1.0

package/src/components/primitives/Badge/index.tsx

@@ -0,0 +1,65 @@
+import { type VariantProps, cva } from "class-variance-authority"
+import type { ReactNode } from "react"
+import { cn } from "../../../lib/utils"
+
+export type BadgeVariant = "normal" | "pending" | "warning" | "error" | "success"
+
+const badgeVariants = cva(
+  "inline-flex items-center gap-1 whitespace-nowrap border font-medium text-ow-fs-caption leading-none px-1.5 py-0.5 [border-radius:var(--ow-radius-tag)]",
+  {
+    variants: {
+      variant: {
+        normal: "bg-ow-badge-normal-bg text-ow-badge-normal-fg border-ow-badge-normal-border",
+        pending: "bg-ow-badge-pending-bg text-ow-badge-pending-fg border-ow-badge-pending-border",
+        warning: "bg-ow-badge-warning-bg text-ow-badge-warning-fg border-ow-badge-warning-border",
+        error: "bg-ow-badge-error-bg text-ow-badge-error-fg border-ow-badge-error-border",
+        success: "bg-ow-badge-success-bg text-ow-badge-success-fg border-ow-badge-success-border",
+      },
+    },
+    defaultVariants: {
+      variant: "normal",
+    },
+  },
+)
+
+interface BadgeProps extends VariantProps<typeof badgeVariants> {
+  children: ReactNode
+  /**
+   * 状态点形态：点色=功能色（随变体前景 currentColor）。
+   * R1 双编码——点永远伴随 children 文字，禁独立纯色点。
+   */
+  dot?: boolean
+  /** 计数读数：mono + tabular-nums（§7 读数口径）。 */
+  count?: ReactNode
+  className?: string
+}
+
+/**
+ * Badge — 直角 6 状态徽标。纯分类/筛选标签用 `Tag`；
+ * 带状态点/计数且可删除的胶囊用 `Chip`（primitives/Chip）。
+ */
+export function Badge({ variant = "normal", dot = false, count, children, className }: BadgeProps) {
+  return (
+    <span
+      data-slot="badge"
+      data-variant={variant}
+      data-ow-part="label"
+      data-ow-role={variant === "normal" ? "neutral" : variant}
+      className={cn(badgeVariants({ variant }), className)}
+    >
+      {dot && (
+        <span
+          data-ow-part="dot"
+          className="w-1.5 h-1.5 shrink-0 bg-current [border-radius:var(--ow-radius-pill)]"
+          aria-hidden="true"
+        />
+      )}
+      {children}
+      {count != null && (
+        <span data-ow-part="count" className="shrink-0 font-[family-name:var(--ow-font-mono)] tabular-nums">
+          {count}
+        </span>
+      )}
+    </span>
+  )
+}

package/src/components/primitives/Button/Button.stories.tsx

@@ -0,0 +1,287 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Download, Plus, Search, Settings, Trash, Close as X } from "../../composite/Icons"
+import { Button } from "./index"
+
+const meta = {
+  title: "Primitives/Button",
+  component: Button,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Button>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  args: {
+    variant: "primary",
+    children: "Primary Button",
+  },
+}
+
+export const Secondary: Story = {
+  args: {
+    variant: "secondary",
+    children: "Secondary Button",
+  },
+}
+
+export const Ghost: Story = {
+  args: {
+    variant: "ghost",
+    children: "Ghost Button",
+  },
+}
+
+export const Text: Story = {
+  args: {
+    variant: "text",
+    children: "Text Button",
+  },
+}
+
+export const Danger: Story = {
+  args: {
+    variant: "danger",
+    children: "Delete",
+  },
+}
+
+/**
+ * unstyled 仅作「可访问 <button> 结构壳」逃逸口：外观由调用方 cva/BEM 类全权提供，
+ * 且须自行补齐 hover/press/focus-visible/disabled。普通操作钮请用正规变体。
+ */
+export const Unstyled: Story = {
+  args: {
+    variant: "unstyled",
+    children: "Unstyled Button",
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    variant: "primary",
+    loading: true,
+    children: "保存中",
+  },
+}
+
+export const SmallSize: Story = {
+  args: {
+    variant: "primary",
+    size: "sm",
+    children: "Small",
+  },
+}
+
+export const MediumSize: Story = {
+  args: {
+    variant: "primary",
+    size: "md",
+    children: "Medium",
+  },
+}
+
+export const LargeSize: Story = {
+  args: {
+    variant: "primary",
+    size: "lg",
+    children: "Large",
+  },
+}
+
+export const WithIcon: Story = {
+  args: {
+    variant: "primary",
+    icon: <Plus />,
+    children: "Add Item",
+  },
+}
+
+export const IconOnly: Story = {
+  args: {
+    variant: "secondary",
+    icon: <Settings />,
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    variant: "primary",
+    children: "Disabled",
+    disabled: true,
+  },
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center" }}>
+      <Button variant="primary">Primary</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="ghost">Ghost</Button>
+      <Button variant="text">Text</Button>
+      <Button variant="danger">Danger</Button>
+    </div>
+  ),
+}
+
+export const AllSizes: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+      <Button variant="primary" size="sm">
+        Small
+      </Button>
+      <Button variant="primary" size="md">
+        Medium
+      </Button>
+      <Button variant="primary" size="lg">
+        Large
+      </Button>
+    </div>
+  ),
+}
+
+export const WithDifferentIcons: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+      <Button variant="primary" icon={<Plus />}>
+        Add
+      </Button>
+      <Button variant="danger" icon={<Trash />}>
+        Delete
+      </Button>
+      <Button variant="secondary" icon={<Download />}>
+        Download
+      </Button>
+      <Button variant="ghost" icon={<Settings />}>
+        Settings
+      </Button>
+      <Button variant="text" icon={<Search />}>
+        Search
+      </Button>
+    </div>
+  ),
+}
+
+export const IconOnlyButtons: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 8 }}>
+      <Button variant="primary" icon={<Plus />} />
+      <Button variant="secondary" icon={<Settings />} />
+      <Button variant="ghost" icon={<Search />} />
+      <Button variant="danger" icon={<Trash />} />
+      <Button variant="text" icon={<X />} />
+    </div>
+  ),
+}
+
+export const VariantSizeMatrix: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+      {(["sm", "md", "lg"] as const).map((size) => (
+        <div key={size} style={{ display: "flex", gap: 8, alignItems: "center" }}>
+          <span
+            style={{
+              width: 72,
+              fontFamily: "var(--ow-font-mono)",
+              fontSize: 11,
+              color: "var(--ow-text-3)",
+              fontVariantNumeric: "tabular-nums",
+            }}
+          >
+            {size} · {size === "sm" ? 28 : size === "md" ? 32 : 40}px
+          </span>
+          <Button variant="primary" size={size}>
+            主操作
+          </Button>
+          <Button variant="secondary" size={size}>
+            次操作
+          </Button>
+          <Button variant="ghost" size={size}>
+            幽灵
+          </Button>
+          <Button variant="danger" size={size}>
+            删除
+          </Button>
+          <Button variant="secondary" size={size} icon={<Settings />} aria-label="设置" />
+        </div>
+      ))}
+    </div>
+  ),
+}
+
+export const LoadingStates: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center" }}>
+      <Button variant="primary" loading>
+        保存中
+      </Button>
+      <Button variant="secondary" loading>
+        提交中
+      </Button>
+      <Button variant="ghost" loading>
+        加载中
+      </Button>
+      <Button variant="danger" loading>
+        删除中
+      </Button>
+      <Button variant="secondary" loading icon={<Settings />} aria-label="加载中" />
+    </div>
+  ),
+}
+
+export const IconOnlyAllSizes: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+      <Button variant="secondary" size="sm" icon={<Settings />} aria-label="设置" />
+      <Button variant="secondary" size="md" icon={<Settings />} aria-label="设置" />
+      <Button variant="secondary" size="lg" icon={<Settings />} aria-label="设置" />
+      <Button variant="ghost" size="sm" icon={<Search />} aria-label="搜索" />
+      <Button variant="ghost" size="md" icon={<Search />} aria-label="搜索" />
+      <Button variant="ghost" size="lg" icon={<Search />} aria-label="搜索" />
+    </div>
+  ),
+}
+
+export const DisabledStates: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+      <Button variant="primary" disabled>
+        Primary
+      </Button>
+      <Button variant="secondary" disabled>
+        Secondary
+      </Button>
+      <Button variant="ghost" disabled>
+        Ghost
+      </Button>
+      <Button variant="danger" disabled>
+        Danger
+      </Button>
+      <Button variant="primary" icon={<Plus />} disabled>
+        With Icon
+      </Button>
+    </div>
+  ),
+}
+
+export const InContext: Story = {
+  render: () => (
+    <div style={{ maxWidth: 500, padding: 24, background: "var(--ow-bg)", borderRadius: 8 }}>
+      <h3 style={{ margin: 0, marginBottom: 8, fontSize: 18, fontWeight: 600, color: "var(--ow-text)" }}>
+        Delete this item?
+      </h3>
+      <p style={{ margin: 0, marginBottom: 24, fontSize: 14, color: "var(--ow-text-2)" }}>
+        This action cannot be undone. The item will be permanently removed.
+      </p>
+      <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
+        <Button variant="ghost">Cancel</Button>
+        <Button variant="danger" icon={<Trash />}>
+          Delete
+        </Button>
+      </div>
+    </div>
+  ),
+}

package/src/components/primitives/Button/ButtonSource.test.mjs

@@ -0,0 +1,84 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+const source = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
+const spinner = await readFile(new URL("../Spinner/index.tsx", import.meta.url), "utf8")
+const cssUrl = new URL("../../../../styles/desktop-surfaces.css", import.meta.url)
+const surfaces = await readFile(cssUrl, "utf8")
+
+test("variants use --ow-btn-* component tokens with hover/press progression", () => {
+  for (const v of ["primary", "secondary", "danger"]) {
+    assert.match(source, new RegExp(`bg-\\[var\\(--ow-btn-${v}-bg\\)\\]`))
+    assert.match(source, new RegExp(`hover:bg-\\[var\\(--ow-btn-${v}-hover\\)\\]`))
+    assert.match(source, new RegExp(`active:bg-\\[var\\(--ow-btn-${v}-press\\)\\]`))
+  }
+  assert.match(source, /hover:bg-\[var\(--ow-btn-ghost-hover\)\]/)
+  assert.match(source, /active:bg-\[var\(--ow-btn-ghost-press\)\]/)
+})
+
+test("disabled is per-token, focus uses ow-focus-ring, motion uses beacon ease + dur-1", () => {
+  assert.match(source, /disabled:bg-\[var\(--ow-btn-primary-disabled-bg\)\]/)
+  assert.match(source, /disabled:text-\[color:var\(--ow-disabled-text\)\]/)
+  assert.doesNotMatch(source, /disabled:opacity/)
+  assert.match(source, /ow-focus-ring/)
+  assert.match(source, /duration-\[var\(--ow-dur-1\)\] ease-\[var\(--ow-ease-beacon\)\]/)
+})
+
+test("size ladder is 28/32/40 with radius-action and DS2 density font sizes", () => {
+  assert.match(source, /sm: "h-7 [^"]*text-ow-fs-ui [^"]*var\(--ow-radius-action\)/)
+  assert.match(source, /md: "h-8 [^"]*text-ow-fs-ui [^"]*var\(--ow-radius-action\)/)
+  assert.match(source, /lg: "h-10 [^"]*text-ow-fs-body [^"]*var\(--ow-radius-action\)/)
+})
+
+// W-R2 §9 唯一转子帧：转子本体收到 primitives/Spinner（原为 Button / DropZone /
+// SkillDetailPanelView / ToolDetailModalView 四份逐字节同款手抄），Button 只接尺寸档。
+test("loading state renders a sub-20px currentColor ring spinner (1.5px stroke, 90deg gap, 0.9s linear)", () => {
+  assert.match(source, /loading\?: boolean/)
+  assert.match(source, /import \{ Spinner \} from "\.\.\/Spinner"/)
+  assert.match(source, /return <Spinner className=\{iconSizeClasses\[size\]\} \/>/)
+  assert.doesNotMatch(source, /<svg/)
+  assert.match(spinner, /animate-\[ow-spin_var\(--ow-dur-spin-fast\)_linear_infinite\]/)
+  assert.match(spinner, /strokeWidth="1\.5"/)
+  assert.match(spinner, /strokeDasharray="75 25"/)
+  assert.match(spinner, /stroke="currentColor"/)
+  assert.match(source, /aria-busy=\{loading \|\| undefined\}/)
+  assert.match(source, /disabled=\{disabled \|\| loading\}/)
+})
+
+test("icon-only compound keeps >=28px square hit targets", () => {
+  assert.match(source, /size: "sm",\s*iconOnly: true,\s*className: "w-7"/s)
+  assert.match(source, /size: "md",\s*iconOnly: true,\s*className: "w-8"/s)
+  assert.match(source, /size: "lg",\s*iconOnly: true,\s*className: "w-10"/s)
+})
+
+test("shared .btn class in desktop-surfaces.css is aligned to the Button primitive tokens", () => {
+  // P6-8：原来是「新旧两套基础 .btn 并存」，本轮已合并为唯一一份，这里改成守住"只有一份"。
+  const base = surfaces.match(/^\.btn \{[^\n]*\}$/gm) ?? []
+  assert.strictEqual(base.length, 1, "共享 .btn 基类必须只有一份（两套并存会反压 .btn--* 修饰档）")
+  assert.match(base[0], /background: var\(--ow-btn-secondary-bg\)/)
+  assert.match(base[0], /var\(--ow-ease-beacon\)/)
+  // W5 §9：逐属性过渡——transition: all 会把 padding / border-width / transform 一并纳入，
+  // 那是装饰动效的口子；只让配色变。
+  assert.doesNotMatch(base[0], /transition: all/)
+  assert.match(
+    base[0],
+    /transition: background var\(--ow-dur-1\)[^;]*, border-color var\(--ow-dur-1\)[^;]*, color var\(--ow-dur-1\)/,
+  )
+  assert.match(surfaces, /^\.btn:hover:not\(:disabled\) \{ background: var\(--ow-btn-secondary-hover\); \}$/m)
+  // focus 环走 --ow-focus-ring-w / --ow-focus-ring-offset（两者都是 2px，口径统一到 token）。
+  assert.match(
+    surfaces,
+    /^\.btn:focus-visible \{ outline: var\(--ow-focus-ring-w\) solid var\(--ow-focus-ring\); outline-offset: var\(--ow-focus-ring-offset\); \}$/m,
+  )
+  assert.match(
+    surfaces,
+    /^\.btn:disabled \{ background: var\(--ow-disabled-bg\); color: var\(--ow-disabled-text\); border-color: var\(--ow-disabled-border\); cursor: not-allowed; \}$/m,
+  )
+  assert.doesNotMatch(surfaces, /^\.btn:disabled \{ opacity/m)
+  assert.match(surfaces, /^\.btn--danger \{ background: var\(--ow-btn-danger-bg\)/m)
+  // 基类必须排在所有 .btn--* 修饰档之前，否则同特异度下基类反压修饰档的 background。
+  const baseAt = surfaces.indexOf(base[0])
+  const firstModifierAt = surfaces.search(/^\.btn--/m)
+  assert.ok(baseAt >= 0 && firstModifierAt >= 0 && baseAt < firstModifierAt, ".btn 基类必须在第一个 .btn--* 之前")
+})

package/src/components/primitives/Button/index.tsx

@@ -0,0 +1,216 @@
+import { type VariantProps, cva } from "class-variance-authority"
+import { type ButtonHTMLAttributes, type ReactNode, forwardRef } from "react"
+import { cn } from "../../../lib/utils"
+import { Spinner } from "../Spinner"
+
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "text" | "danger" | "unstyled"
+export type ButtonSize = "sm" | "md" | "lg"
+
+const buttonVariants = cva(
+  [
+    // W5 终扫：过渡从 transition-all 收窄到具名属性列表——§9 只许换色，all 会把布局/变换一并带上。
+    "inline-flex items-center justify-center font-medium whitespace-nowrap",
+    "transition-[background-color,border-color,color,box-shadow] duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)]",
+    "ow-focus-ring",
+    // R2：原来 disabled:cursor-not-allowed 与 disabled:pointer-events-none 同挂——
+    // 后者让前者永远不可能生效（禁用件不接收指针事件，光标仍是默认箭头）。删死声明，
+    // 禁用态的可读性由 --ow-disabled-* 三色 ＋ disabled 属性（AT 可读）承担。
+    "disabled:pointer-events-none",
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        primary: [
+          "bg-[var(--ow-btn-primary-bg)]",
+          "text-[color:var(--ow-btn-primary-fg)]",
+          "hover:bg-[var(--ow-btn-primary-hover)]",
+          "active:bg-[var(--ow-btn-primary-press)]",
+          "disabled:bg-[var(--ow-btn-primary-disabled-bg)]",
+          "disabled:text-[color:var(--ow-btn-primary-disabled-fg)]",
+        ].join(" "),
+        secondary: [
+          "bg-[var(--ow-btn-secondary-bg)]",
+          "text-[color:var(--ow-btn-secondary-fg)]",
+          "border border-[color:var(--ow-btn-secondary-border)]",
+          "hover:bg-[var(--ow-btn-secondary-hover)]",
+          "active:bg-[var(--ow-btn-secondary-press)]",
+          "disabled:bg-[var(--ow-disabled-bg)]",
+          "disabled:text-[color:var(--ow-disabled-text)]",
+          "disabled:border-[color:var(--ow-disabled-border)]",
+        ].join(" "),
+        ghost: [
+          "bg-transparent",
+          "text-[color:var(--ow-btn-ghost-fg)]",
+          "hover:bg-[var(--ow-btn-ghost-hover)]",
+          "active:bg-[var(--ow-btn-ghost-press)]",
+          "disabled:bg-transparent",
+          "disabled:text-[color:var(--ow-disabled-text)]",
+        ].join(" "),
+        text: [
+          "bg-transparent",
+          "text-[color:var(--ow-btn-text-fg)]",
+          "hover:text-[color:var(--ow-text-hover)]",
+          "active:text-[color:var(--ow-text-press)]",
+          "disabled:text-[color:var(--ow-disabled-text)]",
+        ].join(" "),
+        danger: [
+          "bg-[var(--ow-btn-danger-bg)]",
+          "text-[color:var(--ow-btn-danger-fg)]",
+          "hover:bg-[var(--ow-btn-danger-hover)]",
+          "active:bg-[var(--ow-btn-danger-press)]",
+          "disabled:bg-[var(--ow-btn-danger-disabled-bg)]",
+          "disabled:text-[color:var(--ow-btn-danger-disabled-fg)]",
+        ].join(" "),
+        unstyled: "",
+      },
+      size: {
+        sm: "h-7 gap-1 px-3 text-ow-fs-ui [border-radius:var(--ow-radius-action)]",
+        md: "h-8 gap-1.5 px-4 text-ow-fs-ui [border-radius:var(--ow-radius-action)]",
+        lg: "h-10 gap-1.5 px-6 text-ow-fs-body [border-radius:var(--ow-radius-action)]",
+      },
+      iconOnly: {
+        true: "px-0",
+        false: "",
+      },
+      /* loading 态：交互暂停（disabled 属性）但保持 rest 配色——转子即状态的形编码（R1），不得套 disabled 灰。 */
+      loading: {
+        true: "",
+        false: "",
+      },
+    },
+    compoundVariants: [
+      {
+        variant: "primary",
+        loading: true,
+        className: "disabled:bg-[var(--ow-btn-primary-bg)] disabled:text-[color:var(--ow-btn-primary-fg)]",
+      },
+      {
+        variant: "secondary",
+        loading: true,
+        className:
+          "disabled:bg-[var(--ow-btn-secondary-bg)] disabled:text-[color:var(--ow-btn-secondary-fg)] disabled:border-[color:var(--ow-btn-secondary-border)]",
+      },
+      {
+        variant: "ghost",
+        loading: true,
+        className: "disabled:bg-transparent disabled:text-[color:var(--ow-btn-ghost-fg)]",
+      },
+      {
+        variant: "text",
+        loading: true,
+        className: "disabled:text-[color:var(--ow-btn-text-fg)]",
+      },
+      {
+        variant: "danger",
+        loading: true,
+        className: "disabled:bg-[var(--ow-btn-danger-bg)] disabled:text-[color:var(--ow-btn-danger-fg)]",
+      },
+      {
+        size: "sm",
+        iconOnly: true,
+        className: "w-7",
+      },
+      {
+        size: "md",
+        iconOnly: true,
+        className: "w-8",
+      },
+      {
+        size: "lg",
+        iconOnly: true,
+        className: "w-10",
+      },
+    ],
+    defaultVariants: {
+      variant: "secondary",
+      size: "md",
+      iconOnly: false,
+      loading: false,
+    },
+  },
+)
+
+const iconSizeClasses: Record<ButtonSize, string> = {
+  sm: "w-4 h-4",
+  md: "w-4 h-4",
+  lg: "w-5 h-5",
+}
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant
+  size?: ButtonSize
+  icon?: ReactNode
+  children?: ReactNode
+  /** 加载态：显示 <20px 小转子（1.5px 描边圆环＋90° 缺口 · linear 0.9s · currentColor），并暂停交互。 */
+  loading?: boolean
+}
+
+/** §9 <20px 小转子＝primitives/Spinner 唯一一份实现；本件只负责按尺寸档接上 icon 尺寸表。 */
+function ButtonSpinner({ size }: { size: ButtonSize }) {
+  return <Spinner className={iconSizeClasses[size]} />
+}
+
+/**
+ * DS2 原语按钮。正规变体：primary / secondary / ghost / danger × sm(28) / md(32) / lg(40)；
+ * icon-only（传 icon 不传 children）即 IconButton 语义，≥28×28、命中区 ≥24。
+ *
+ * `variant="unstyled"` 的适用边界（逃逸口，勿滥用）：
+ * 仅当 Button 只作为「可访问的 <button> 结构壳」被复用、外观完全由调用方自带的
+ * cva/BEM 类（如 desktop-surfaces.css 的 .btn/.ow* 视图类）提供时才允许——
+ * 此时调用方样式必须自行补齐 §6 状态（hover/press/focus-visible/disabled）。
+ * 凡外观接近正规变体（普通操作钮、图标钮）的场景一律用正规变体，不得 unstyled 手搓。
+ *
+ * `variant="text"` 为 V1 遗留别名（链接样文字钮），新代码请优先 ghost 或 Link 规范。
+ */
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  { variant = "secondary", size = "md", icon, children, className, loading = false, disabled, ...rest },
+  ref,
+) {
+  if (variant === "unstyled") {
+    return (
+      <button ref={ref} type="button" className={className} disabled={disabled} {...rest}>
+        {children}
+      </button>
+    )
+  }
+
+  const isIconOnly = Boolean(icon && !children)
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      data-loading={loading || undefined}
+      data-ow-part="action"
+      data-ow-role={variant === "primary" || variant === "danger" ? variant : "secondary"}
+      aria-busy={loading || undefined}
+      disabled={disabled || loading}
+      className={cn(
+        buttonVariants({ variant, size, iconOnly: isIconOnly ? true : false, loading: loading && !disabled }),
+        className,
+      )}
+      {...rest}
+    >
+      {loading ? (
+        <ButtonSpinner size={size} />
+      ) : (
+        icon && (
+          <span
+            data-ow-part="icon"
+            className={cn("inline-flex items-center justify-center flex-shrink-0", iconSizeClasses[size])}
+          >
+            {icon}
+          </span>
+        )
+      )}
+      {children && (
+        <span data-ow-part="label" className="inline-flex items-center gap-[inherit] whitespace-nowrap">
+          {children}
+        </span>
+      )}
+    </button>
+  )
+})