feat: add ButtonTertiary component

src/components/ButtonTertiary.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { userEvent } from "@storybook/test";
+
+import { ButtonTertiary } from "./ButtonTertiary";
+
+const meta = {
+  component: ButtonTertiary,
+} satisfies Meta<typeof ButtonTertiary>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic = {
+  args: {
+    children: "Click me",
+    disabled: false,
+  },
+} satisfies Story;
+
+export const Interactivity = {
+  render: () => (
+    <div className="flex flex-wrap gap-4">
+      <ButtonTertiary>Focused</ButtonTertiary>
+      <ButtonTertiary disabled>Disabled</ButtonTertiary>
+    </div>
+  ),
+  play: async () => {
+    await userEvent.tab();
+  },
+} satisfies Story;
+
+export const Sizes = {
+  render: () => (
+    <div className="flex flex-col items-start gap-4">
+      <ButtonTertiary size="sm">Small</ButtonTertiary>
+      <ButtonTertiary size="md">Medium</ButtonTertiary>
+      <ButtonTertiary size="lg">Large</ButtonTertiary>
+    </div>
+  ),
+} satisfies Story;
+
+export const Colors = {
+  render: () => (
+    <div className="flex flex-wrap gap-4">
+      <ButtonTertiary color="neutral">Neutral</ButtonTertiary>
+      <ButtonTertiary color="accent">Accent</ButtonTertiary>
+      <ButtonTertiary color="danger">Danger</ButtonTertiary>
+    </div>
+  ),
+} satisfies Story;

src/components/ButtonTertiary.tsx

@@ -0,0 +1,32 @@
+import { clsx } from "clsx/lite";
+import { forwardRef } from "react";
+
+import { Button, type ButtonProps } from "./Button";
+
+export interface ButtonTertiaryProps extends ButtonProps {
+  size?: "sm" | "md" | "lg";
+  color?: "neutral" | "accent" | "danger";
+}
+
+export const ButtonTertiary = forwardRef(function ButtonTertiary(
+  { size = "md", color = "neutral", className, ...props }: ButtonTertiaryProps,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) {
+  return (
+    <Button
+      ref={ref}
+      size={size}
+      className={clsx(
+        className,
+        "bg-ui-neutral-50 font-medium ring-1 ring-inset",
+        color === "neutral" &&
+          "text-ui-neutral-950 ring-ui-neutral-600 active:bg-ui-neutral-100",
+        color === "accent" &&
+          "text-ui-accent-700 ring-ui-accent-600 active:bg-ui-accent-100",
+        color === "danger" &&
+          "text-ui-danger-700 ring-ui-danger-600 active:bg-ui-danger-100",
+      )}
+      {...props}
+    />
+  );
+});

src/docs/sample.mdx

@@ -3,6 +3,7 @@ import { Unstyled } from "@storybook/blocks";
 import { Alert } from "../components/Alert";
 import { ButtonPrimary } from "../components/ButtonPrimary";
 import { ButtonSecondary } from "../components/ButtonSecondary";
+import { ButtonTertiary } from "../components/ButtonTertiary";
 import { Input } from "../components/Input";
 
 <Unstyled>
@@ -15,7 +16,7 @@ import { Input } from "../components/Input";
         <div className="flex flex-wrap gap-2">
           <Input size="sm" placeholder="Placeholder" />
           <ButtonPrimary size="sm">Ok</ButtonPrimary>
-          <ButtonSecondary size="sm">Cancel</ButtonSecondary>
+          <ButtonTertiary size="sm">Cancel</ButtonTertiary>
         </div>
       </div>
     </Alert>
@@ -25,16 +26,15 @@ import { Input } from "../components/Input";
     <div>This is just a block of text.</div>
     <div className="flex gap-2">
       <Input size="sm" placeholder="Placeholder" />
-      <ButtonPrimary size="sm">Submit</ButtonPrimary>
+      <ButtonSecondary size="sm">Submit</ButtonSecondary>
     </div>
     <div className="flex gap-2">
       <Input size="md" placeholder="Placeholder" />
-      <ButtonPrimary size="md">Submit</ButtonPrimary>
+      <ButtonSecondary size="md">Submit</ButtonSecondary>
     </div>
     <div className="flex gap-2">
       <Input size="lg" placeholder="Placeholder" />
-      <ButtonPrimary size="lg">Submit</ButtonPrimary>
+      <ButtonSecondary size="lg">Submit</ButtonSecondary>
     </div>
   </div>
 </Unstyled>
-typetypetype