@proteos/ui 0.31.0

package/src/components/button/button.stories.tsx

@@ -0,0 +1,290 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { Button } from './button'
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  tags: ['autodocs'],
+  args: {
+    children: 'Start building →',
+    variant: 'primary',
+    size: 'md',
+    shape: 'rounded',
+  },
+  argTypes: {
+    variant: {
+      control: { type: 'inline-radio' },
+      options: ['primary', 'accent', 'secondary', 'ghost', 'link'],
+    },
+    size: {
+      control: { type: 'inline-radio' },
+      options: ['sm', 'md', 'lg', 'icon-sm', 'icon-md', 'icon-lg'],
+    },
+    shape: {
+      control: { type: 'inline-radio' },
+      options: ['rounded', 'pill'],
+    },
+    isDisabled: { control: { type: 'boolean' } },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Button>
+
+export const Playground: Story = {}
+
+const Arrow = () => (
+  <svg viewBox="0 0 12 12" fill="none" aria-hidden>
+    <path d="M2 6h8m-3-3 3 3-3 3" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" />
+  </svg>
+)
+
+export const Primary: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-3">
+      <Button>Start building →</Button>
+      <Button size="sm">Save</Button>
+      <Button size="lg">Compose system</Button>
+      <Button isDisabled>Disabled</Button>
+    </div>
+  ),
+}
+
+export const Accent: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-3">
+      <Button variant="accent">
+        Compose <Arrow />
+      </Button>
+      <Button variant="accent" size="sm">
+        Run
+      </Button>
+      <Button variant="accent" size="lg">
+        Publish changes
+      </Button>
+    </div>
+  ),
+}
+
+export const Secondary: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-3">
+      <Button variant="secondary">Read manifesto</Button>
+      <Button variant="secondary" size="sm">
+        Cancel
+      </Button>
+      <Button variant="secondary" size="lg">
+        Book a demo
+      </Button>
+    </div>
+  ),
+}
+
+export const Ghost: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-3">
+      <Button variant="ghost">Filter</Button>
+      <Button variant="ghost" size="sm">
+        Group
+      </Button>
+      <Button variant="ghost">Export</Button>
+      <Button variant="ghost">+ New shipment</Button>
+    </div>
+  ),
+}
+
+export const Link: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-6">
+      <Button variant="link">Read the docs</Button>
+      <Button variant="link">View architecture</Button>
+      <Button variant="link">Schedule an architect</Button>
+    </div>
+  ),
+}
+
+const columns = 'grid grid-cols-[160px_1fr] items-center gap-y-5 gap-x-6'
+const label = 'font-mono text-[11px] uppercase tracking-[0.08em] text-ink-4'
+
+export const AllVariants: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => (
+    <div className={columns}>
+      <div className={label}>Primary</div>
+      <div className="flex flex-wrap items-center gap-3">
+        <Button size="sm">Save</Button>
+        <Button>Start building →</Button>
+        <Button size="lg">Compose system</Button>
+        <Button isDisabled>Disabled</Button>
+      </div>
+
+      <div className={label}>Accent</div>
+      <div className="flex flex-wrap items-center gap-3">
+        <Button variant="accent" size="sm">
+          Run
+        </Button>
+        <Button variant="accent">
+          Compose <Arrow />
+        </Button>
+        <Button variant="accent" size="lg">
+          Publish changes
+        </Button>
+      </div>
+
+      <div className={label}>Secondary</div>
+      <div className="flex flex-wrap items-center gap-3">
+        <Button variant="secondary" size="sm">
+          Cancel
+        </Button>
+        <Button variant="secondary">Read manifesto</Button>
+        <Button variant="secondary" size="lg">
+          Book a demo
+        </Button>
+      </div>
+
+      <div className={label}>Ghost</div>
+      <div className="flex flex-wrap items-center gap-3">
+        <Button variant="ghost" size="sm">
+          Group
+        </Button>
+        <Button variant="ghost">Filter</Button>
+        <Button variant="ghost">+ New shipment</Button>
+      </div>
+
+      <div className={label}>Link</div>
+      <div className="flex flex-wrap items-center gap-6">
+        <Button variant="link">Read the docs</Button>
+        <Button variant="link">View architecture</Button>
+      </div>
+    </div>
+  ),
+}
+
+/* =========================================================================
+   Shape — default `rounded` (soft 10px corners, the new standard) vs `pill`
+   (fully-rounded, used sparingly for prominent CTAs / filters).
+   ========================================================================= */
+
+export const Rounded: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-3">
+      <Button variant="ghost">Filter</Button>
+      <Button variant="ghost">Group</Button>
+      <Button>+ New shipment</Button>
+    </div>
+  ),
+}
+
+export const Pill: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-3">
+      <Button shape="pill" variant="ghost">
+        Filter
+      </Button>
+      <Button shape="pill" variant="ghost">
+        Group
+      </Button>
+      <Button shape="pill">+ New shipment</Button>
+    </div>
+  ),
+}
+
+export const Shapes: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => (
+    <div className={columns}>
+      <div className={label}>Rounded</div>
+      <div className="flex flex-wrap items-center gap-3">
+        <Button variant="ghost" size="sm">
+          Filter
+        </Button>
+        <Button variant="ghost">Group</Button>
+        <Button>+ New shipment</Button>
+      </div>
+
+      <div className={label}>Pill</div>
+      <div className="flex flex-wrap items-center gap-3">
+        <Button shape="pill" variant="ghost" size="sm">
+          Filter
+        </Button>
+        <Button shape="pill" variant="ghost">
+          Group
+        </Button>
+        <Button shape="pill">+ New shipment</Button>
+      </div>
+    </div>
+  ),
+}
+
+/* =========================================================================
+   Icon-only — square dimensions via `size="icon-sm | icon-md | icon-lg"`.
+   `aria-label` is required (not enforced at the type level — add it manually).
+   ========================================================================= */
+
+const Plus = () => (
+  <svg viewBox="0 0 16 16" fill="none" aria-hidden>
+    <path d="M8 3v10M3 8h10" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
+  </svg>
+)
+
+const ArrowRight = () => (
+  <svg viewBox="0 0 16 16" fill="none" aria-hidden>
+    <path
+      d="M3 8h10m-4-4 4 4-4 4"
+      stroke="currentColor"
+      strokeWidth="1.4"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+export const IconOnly: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => (
+    <div className={columns}>
+      <div className={label}>Sizes</div>
+      <div className="flex items-center gap-3">
+        <Button size="icon-sm" variant="ghost" aria-label="Add">
+          <Plus />
+        </Button>
+        <Button size="icon-md" variant="ghost" aria-label="Add">
+          <Plus />
+        </Button>
+        <Button size="icon-lg" variant="ghost" aria-label="Add">
+          <Plus />
+        </Button>
+      </div>
+
+      <div className={label}>Variants</div>
+      <div className="flex items-center gap-3">
+        <Button size="icon-md" variant="primary" aria-label="Add">
+          <Plus />
+        </Button>
+        <Button size="icon-md" variant="accent" aria-label="Next">
+          <ArrowRight />
+        </Button>
+        <Button size="icon-md" variant="secondary" aria-label="Add">
+          <Plus />
+        </Button>
+        <Button size="icon-md" variant="ghost" aria-label="Add">
+          <Plus />
+        </Button>
+      </div>
+
+      <div className={label}>Pill shape</div>
+      <div className="flex items-center gap-3">
+        <Button size="icon-sm" variant="ghost" shape="pill" aria-label="Add">
+          <Plus />
+        </Button>
+        <Button size="icon-md" variant="primary" shape="pill" aria-label="Add">
+          <Plus />
+        </Button>
+        <Button size="icon-lg" variant="accent" shape="pill" aria-label="Next">
+          <ArrowRight />
+        </Button>
+      </div>
+    </div>
+  ),
+}

package/src/components/button/button.test.tsx

@@ -0,0 +1,59 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+
+import { Button } from './button'
+
+describe('Button', () => {
+  it('renders its label', () => {
+    render(<Button>Compose</Button>)
+    expect(screen.getByRole('button', { name: 'Compose' })).toBeInTheDocument()
+  })
+
+  it('fires onPress when clicked', async () => {
+    const onPress = vi.fn()
+    const user = userEvent.setup()
+
+    render(<Button onPress={onPress}>Save</Button>)
+    await user.click(screen.getByRole('button', { name: 'Save' }))
+
+    expect(onPress).toHaveBeenCalledOnce()
+  })
+
+  it('is keyboard focusable and activates on Enter', async () => {
+    const onPress = vi.fn()
+    const user = userEvent.setup()
+
+    render(<Button onPress={onPress}>Run</Button>)
+    await user.tab()
+    expect(screen.getByRole('button', { name: 'Run' })).toHaveFocus()
+
+    await user.keyboard('{Enter}')
+    expect(onPress).toHaveBeenCalledOnce()
+  })
+
+  it('does not fire onPress when disabled', async () => {
+    const onPress = vi.fn()
+    const user = userEvent.setup()
+
+    render(
+      <Button onPress={onPress} isDisabled>
+        Disabled
+      </Button>,
+    )
+    await user.click(screen.getByRole('button', { name: 'Disabled' }))
+
+    expect(onPress).not.toHaveBeenCalled()
+  })
+
+  it('applies the requested variant and size classes', () => {
+    render(
+      <Button variant="accent" size="lg">
+        Publish
+      </Button>,
+    )
+    const button = screen.getByRole('button', { name: 'Publish' })
+    expect(button.className).toContain('bg-accent')
+    expect(button.className).toContain('px-[22px]')
+  })
+})

package/src/components/button/button.tsx

@@ -0,0 +1,86 @@
+import { Button as AriaButton, type ButtonProps as AriaButtonProps } from 'react-aria-components'
+import { tv, type VariantProps } from 'tailwind-variants'
+
+import { cn } from '../../lib/cn'
+
+export const buttonStyles = tv({
+  base: [
+    'inline-flex items-center justify-center gap-2 whitespace-nowrap cursor-pointer',
+    'font-mono tracking-[-0.005em] border border-transparent',
+    'transition-[background-color,color,border-color,box-shadow,transform] duration-150',
+    'outline-none pressed:translate-y-px',
+    'focus-visible:shadow-[var(--shadow-focus)]',
+    'disabled:opacity-45 disabled:cursor-not-allowed disabled:pointer-events-none',
+  ],
+  variants: {
+    variant: {
+      primary: ['bg-ink text-surface border-ink', 'hover:bg-accent-ink hover:border-accent-ink'],
+      // Hover uses accent-2 — the token DESIGN.md reserves for "hover on
+      // accent". accent-ink is a text-on-tinted-surface color and flips
+      // light in dark mode, so it can't double as a hover fill here.
+      accent: [
+        'bg-accent text-[#f0efe8] border-accent',
+        'hover:bg-accent-2 hover:border-accent-2',
+      ],
+      secondary: ['bg-transparent text-ink border-ink', 'hover:bg-ink hover:text-surface'],
+      ghost: [
+        'bg-bg text-ink-2 border-rule-strong',
+        'hover:bg-surface-2 hover:text-ink hover:border-ink-4',
+      ],
+      // Transparent at rest, paper-fill on hover. The toolbar / sidebar
+      // register — pairs with `size="icon-md"` for top-bar icon buttons.
+      subtle: ['bg-transparent text-ink-3 border-transparent', 'hover:bg-surface-2 hover:text-ink'],
+      link: [
+        'bg-transparent text-ink-2 border-transparent',
+        'px-0.5 border-b border-b-ink-4',
+        'hover:text-ink hover:border-b-ink',
+      ],
+    },
+    size: {
+      sm: 'text-xs px-3 py-1.5 [&_svg]:size-3',
+      md: 'text-[13px] px-4 py-[9px] [&_svg]:size-3',
+      lg: 'text-sm px-[22px] py-3 [&_svg]:size-3.5',
+      // Square dimensions for icon-only buttons. Requires an `aria-label`.
+      'icon-sm': 'size-7 p-0 [&_svg]:size-3.5',
+      'icon-md': 'size-[34px] p-0 [&_svg]:size-4',
+      'icon-lg': 'size-[42px] p-0 [&_svg]:size-[18px]',
+    },
+    // Corner shape. Default is rounded (soft 10px radius — the standard
+    // Proteos button), `pill` is the fully-rounded legacy treatment.
+    // The `link` variant overrides both to a flat underline.
+    shape: {
+      rounded: 'rounded-md',
+      pill: 'rounded-pill',
+    },
+  },
+  compoundVariants: [
+    { variant: 'link', size: 'sm', class: 'px-0.5 py-0' },
+    { variant: 'link', size: 'md', class: 'px-0.5 py-0' },
+    { variant: 'link', size: 'lg', class: 'px-0.5 py-0' },
+    // Link never takes a corner radius — it's an underline, not a box.
+    { variant: 'link', shape: 'rounded', class: 'rounded-none' },
+    { variant: 'link', shape: 'pill', class: 'rounded-none' },
+  ],
+  defaultVariants: {
+    variant: 'primary',
+    size: 'md',
+    shape: 'rounded',
+  },
+})
+
+export type ButtonVariants = VariantProps<typeof buttonStyles>
+export type ButtonProps = AriaButtonProps & ButtonVariants
+
+export function Button({ variant, size, shape, className, ...props }: ButtonProps) {
+  return (
+    <AriaButton
+      {...props}
+      className={(renderProps) =>
+        cn(
+          buttonStyles({ variant, size, shape }),
+          typeof className === 'function' ? className(renderProps) : className,
+        )
+      }
+    />
+  )
+}

package/src/components/button/index.ts

@@ -0,0 +1,2 @@
+export type { ButtonProps, ButtonVariants } from './button'
+export { Button, buttonStyles } from './button'