@proteos/ui 0.31.0

package/src/components/card/card.stories.tsx

@@ -0,0 +1,351 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { Separator } from '@/components/separator/separator'
+
+import {
+  Card,
+  CardBody,
+  CardContent,
+  CardEyebrow,
+  CardFeatureTitle,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  PressableCard,
+} from './card'
+
+const meta: Meta<typeof Card> = {
+  title: 'Components/Card',
+  component: Card,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: { type: 'inline-radio' },
+      options: ['default', 'accent', 'outline', 'raised'],
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[360px]">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof Card>
+
+/* =========================================================================
+   Playground — flip the `variant` control to recolor the chrome. Content
+   stays the same; slots own their own padding so no variant can break it.
+   ========================================================================= */
+
+export const Playground: Story = {
+  render: (args) => (
+    <Card {...args}>
+      <CardContent>
+        <CardEyebrow>
+          <span>Standard</span>
+          <span>card</span>
+        </CardEyebrow>
+        <CardTitle>Open shipments</CardTitle>
+        <CardBody>
+          The system employees open every morning. Records, tables, dashboards, approvals.
+        </CardBody>
+      </CardContent>
+      <Separator />
+      <CardFooter>
+        <span>1,284 open</span>
+        <span>→</span>
+      </CardFooter>
+    </Card>
+  ),
+}
+
+export const Accent: Story = {
+  args: { variant: 'accent' },
+  render: (args) => (
+    <Card {...args}>
+      <CardContent>
+        <CardEyebrow>
+          <span>Accent</span>
+          <span>card · accent</span>
+        </CardEyebrow>
+        <CardTitle>Architect AI</CardTitle>
+        <CardBody>
+          Describe a change in plain language. The architect edits schema, workflows and views —
+          never leaves the platform.
+        </CardBody>
+      </CardContent>
+      <Separator />
+      <CardFooter>
+        <span>always on</span>
+        <span>→</span>
+      </CardFooter>
+    </Card>
+  ),
+}
+
+export const Outline: Story = {
+  args: { variant: 'outline' },
+  render: (args) => (
+    <Card {...args}>
+      <CardContent>
+        <CardEyebrow>
+          <span>Outline</span>
+          <span>card · outline</span>
+        </CardEyebrow>
+        <CardTitle>Reshape workflow</CardTitle>
+        <CardBody>
+          "Group shipments by lane, show weekly margin." The system accepts the instruction and
+          edits itself.
+        </CardBody>
+      </CardContent>
+      <Separator />
+      <CardFooter>
+        <span>dry-run available</span>
+        <span>→</span>
+      </CardFooter>
+    </Card>
+  ),
+}
+
+/* =========================================================================
+   WithHeader — demonstrates the flush full-bleed bar pattern. Compose
+   <CardHeader/> + <CardContent/> to get what used to be the `flush` variant.
+   Works with any chrome variant.
+   ========================================================================= */
+
+export const WithHeader: Story = {
+  render: (args) => (
+    <Card {...args}>
+      <CardHeader>
+        <span>Shipment</span>
+        <span>SH-10482</span>
+      </CardHeader>
+      <CardContent>
+        <CardTitle>DAL → ATL</CardTitle>
+        <CardBody>Blue Ridge · Apr 24 · in transit</CardBody>
+      </CardContent>
+    </Card>
+  ),
+}
+
+export const Raised: Story = {
+  args: { variant: 'raised' },
+  decorators: [
+    (Story) => (
+      <div className="w-[640px]">
+        <Story />
+      </div>
+    ),
+  ],
+  render: (args) => (
+    <Card {...args}>
+      <CardContent>
+        <CardEyebrow>
+          <span>Feature</span>
+          <span>card · raised</span>
+        </CardEyebrow>
+        <CardFeatureTitle>"The system reshapes when the business does."</CardFeatureTitle>
+        <CardBody>
+          A feature card is reserved for editorial moments — a pull quote, a manifesto line, the
+          answer to "why now." One per page, never two.
+        </CardBody>
+      </CardContent>
+      <Separator />
+      <CardFooter>
+        <span>— Proteos manifesto</span>
+        <span>2026</span>
+      </CardFooter>
+    </Card>
+  ),
+}
+
+/* =========================================================================
+   AllVariants — every chrome variant side by side, plus a CardHeader example
+   to show the flush-bar composition.
+   ========================================================================= */
+
+export const AllVariants: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  decorators: [
+    (Story) => (
+      <div className="w-[1080px] grid grid-cols-3 gap-5">
+        <Story />
+      </div>
+    ),
+  ],
+  render: () => (
+    <>
+      <Card>
+        <CardContent>
+          <CardEyebrow>
+            <span>Standard</span>
+            <span>card</span>
+          </CardEyebrow>
+          <CardTitle>Open shipments</CardTitle>
+          <CardBody>The system employees open every morning.</CardBody>
+        </CardContent>
+        <Separator />
+        <CardFooter>
+          <span>1,284 open</span>
+          <span>→</span>
+        </CardFooter>
+      </Card>
+
+      <Card variant="accent">
+        <CardContent>
+          <CardEyebrow>
+            <span>Accent</span>
+            <span>card · accent</span>
+          </CardEyebrow>
+          <CardTitle>Architect AI</CardTitle>
+          <CardBody>Describe a change in plain language. The architect edits schema.</CardBody>
+        </CardContent>
+        <Separator />
+        <CardFooter>
+          <span>always on</span>
+          <span>→</span>
+        </CardFooter>
+      </Card>
+
+      <Card variant="outline">
+        <CardContent>
+          <CardEyebrow>
+            <span>Outline</span>
+            <span>card · outline</span>
+          </CardEyebrow>
+          <CardTitle>Reshape workflow</CardTitle>
+          <CardBody>
+            "Group shipments by lane, show weekly margin." The system edits itself.
+          </CardBody>
+        </CardContent>
+        <Separator />
+        <CardFooter>
+          <span>dry-run available</span>
+          <span>→</span>
+        </CardFooter>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <span>Shipment</span>
+          <span>SH-10482</span>
+        </CardHeader>
+        <CardContent>
+          <CardTitle>DAL → ATL</CardTitle>
+          <CardBody>Blue Ridge · Apr 24 · in transit</CardBody>
+        </CardContent>
+      </Card>
+
+      <Card variant="raised" className="col-span-2">
+        <CardContent>
+          <CardEyebrow>
+            <span>Feature</span>
+            <span>card · raised</span>
+          </CardEyebrow>
+          <CardFeatureTitle>"The system reshapes when the business does."</CardFeatureTitle>
+          <CardBody>
+            A feature card is reserved for editorial moments — one per page, never two.
+          </CardBody>
+        </CardContent>
+        <Separator />
+        <CardFooter>
+          <span>— Proteos manifesto</span>
+          <span>2026</span>
+        </CardFooter>
+      </Card>
+    </>
+  ),
+}
+
+/* =========================================================================
+   Pressable — chrome-identical, wired as a RAC Button. Same slot API.
+   Hover lifts the shadow, press sinks 1px, focus shows indigo ring.
+   ========================================================================= */
+
+export const Pressable: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => (
+    <PressableCard
+      aria-label="Open shipment SH-10482"
+      onPress={() => {
+        /* in real use: navigate, open drawer, etc. */
+      }}
+    >
+      <CardHeader>
+        <span>Shipment</span>
+        <span>SH-10482</span>
+      </CardHeader>
+      <CardContent>
+        <CardTitle>DAL → ATL</CardTitle>
+        <CardBody>Blue Ridge · Apr 24 · in transit</CardBody>
+      </CardContent>
+      <Separator />
+      <CardFooter>
+        <span>Tap anywhere to open</span>
+        <span>→</span>
+      </CardFooter>
+    </PressableCard>
+  ),
+}
+
+export const PressableVariants: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  decorators: [
+    (Story) => (
+      <div className="w-[720px] grid grid-cols-2 gap-5">
+        <Story />
+      </div>
+    ),
+  ],
+  render: () => (
+    <>
+      <PressableCard aria-label="Open default card">
+        <CardContent>
+          <CardEyebrow>
+            <span>Default</span>
+            <span>pressable</span>
+          </CardEyebrow>
+          <CardTitle>Standard + pressable</CardTitle>
+          <CardBody>Hover to lift, focus to ring, press to sink.</CardBody>
+        </CardContent>
+      </PressableCard>
+
+      <PressableCard aria-label="Open accent card" variant="accent">
+        <CardContent>
+          <CardEyebrow>
+            <span>Accent</span>
+            <span>pressable</span>
+          </CardEyebrow>
+          <CardTitle>Accent + pressable</CardTitle>
+          <CardBody>Indigo-tinted surface, still click/keyboard-reachable.</CardBody>
+        </CardContent>
+      </PressableCard>
+
+      <PressableCard aria-label="Open outline card" variant="outline">
+        <CardContent>
+          <CardEyebrow>
+            <span>Outline</span>
+            <span>pressable</span>
+          </CardEyebrow>
+          <CardTitle>Outline + pressable</CardTitle>
+          <CardBody>No rest shadow, but the hover lift still fires on interaction.</CardBody>
+        </CardContent>
+      </PressableCard>
+
+      <PressableCard aria-label="Disabled card" isDisabled>
+        <CardContent>
+          <CardEyebrow>
+            <span>Disabled</span>
+            <span>pressable</span>
+          </CardEyebrow>
+          <CardTitle>Disabled</CardTitle>
+          <CardBody>Receives no pointer events, fades to 45% opacity.</CardBody>
+        </CardContent>
+      </PressableCard>
+    </>
+  ),
+}

package/src/components/card/card.test.tsx

@@ -0,0 +1,141 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+
+import {
+  Card,
+  CardBody,
+  CardContent,
+  CardEyebrow,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  PressableCard,
+} from './card'
+
+describe('Card', () => {
+  it('renders children', () => {
+    render(
+      <Card>
+        <CardContent>Open shipments</CardContent>
+      </Card>,
+    )
+    expect(screen.getByText('Open shipments')).toBeInTheDocument()
+  })
+
+  it('applies chrome variant classes', () => {
+    const { container } = render(
+      <Card variant="outline">
+        <CardContent>x</CardContent>
+      </Card>,
+    )
+    expect(container.firstElementChild?.className).toContain('shadow-none')
+  })
+
+  it('composes slots end to end (eyebrow + title + body + footer)', () => {
+    render(
+      <Card>
+        <CardContent>
+          <CardEyebrow>
+            <span>Standard</span>
+            <span>card</span>
+          </CardEyebrow>
+          <CardTitle>Open shipments</CardTitle>
+          <CardBody>The system employees open every morning.</CardBody>
+        </CardContent>
+        <CardFooter>
+          <span>1,284 open</span>
+          <span>→</span>
+        </CardFooter>
+      </Card>,
+    )
+
+    expect(screen.getByRole('heading', { name: 'Open shipments' })).toBeInTheDocument()
+    expect(screen.getByText('The system employees open every morning.')).toBeInTheDocument()
+    expect(screen.getByText('1,284 open')).toBeInTheDocument()
+  })
+
+  it('composes a CardHeader flush bar with padded CardContent', () => {
+    render(
+      <Card>
+        <CardHeader>
+          <span>Shipment</span>
+          <span>SH-10482</span>
+        </CardHeader>
+        <CardContent>
+          <CardTitle>DAL → ATL</CardTitle>
+        </CardContent>
+      </Card>,
+    )
+
+    expect(screen.getByText('Shipment')).toBeInTheDocument()
+    expect(screen.getByText('SH-10482')).toBeInTheDocument()
+    expect(screen.getByRole('heading', { name: 'DAL → ATL' })).toBeInTheDocument()
+  })
+})
+
+describe('PressableCard', () => {
+  it('renders as a button with an accessible name', () => {
+    render(
+      <PressableCard aria-label="Open shipment SH-10482">
+        <CardContent>
+          <CardTitle>DAL → ATL</CardTitle>
+        </CardContent>
+      </PressableCard>,
+    )
+    expect(screen.getByRole('button', { name: 'Open shipment SH-10482' })).toBeInTheDocument()
+  })
+
+  it('fires onPress when clicked', async () => {
+    const onPress = vi.fn()
+    const user = userEvent.setup()
+
+    render(
+      <PressableCard aria-label="Open shipment" onPress={onPress}>
+        <CardContent>DAL → ATL</CardContent>
+      </PressableCard>,
+    )
+
+    await user.click(screen.getByRole('button', { name: 'Open shipment' }))
+    expect(onPress).toHaveBeenCalledOnce()
+  })
+
+  it('fires onPress on keyboard Enter', async () => {
+    const onPress = vi.fn()
+    const user = userEvent.setup()
+
+    render(
+      <PressableCard aria-label="Open shipment" onPress={onPress}>
+        <CardContent>content</CardContent>
+      </PressableCard>,
+    )
+
+    await user.tab()
+    expect(screen.getByRole('button')).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(
+      <PressableCard aria-label="Disabled card" onPress={onPress} isDisabled>
+        <CardContent>content</CardContent>
+      </PressableCard>,
+    )
+
+    await user.click(screen.getByRole('button', { name: 'Disabled card' }))
+    expect(onPress).not.toHaveBeenCalled()
+  })
+
+  it('applies the requested variant styles', () => {
+    render(
+      <PressableCard aria-label="Accent card" variant="accent">
+        <CardContent>content</CardContent>
+      </PressableCard>,
+    )
+    expect(screen.getByRole('button').className).toContain('text-accent-ink')
+  })
+})

package/src/components/card/card.tsx

@@ -0,0 +1,173 @@
+import type { HTMLAttributes } from 'react'
+import { Button as AriaButton, type ButtonProps as AriaButtonProps } from 'react-aria-components'
+import { tv, type VariantProps } from 'tailwind-variants'
+
+import { cn } from '../../lib/cn'
+
+/* =========================================================================
+   Card — chrome-only shell.
+   Padding lives on the slot components (<CardHeader/>, <CardContent/>,
+   <CardFooter/>), never on Card itself. Variants control cosmetics only —
+   border tint, shadow depth — so slot composition and variant are orthogonal.
+   ========================================================================= */
+
+export const cardStyles = tv({
+  base: [
+    'flex flex-col overflow-hidden',
+    'border border-rule bg-surface rounded-lg',
+    'shadow-[var(--shadow-rest)]',
+    'text-[14px] text-ink-2',
+  ],
+  variants: {
+    variant: {
+      default: '',
+      accent: [
+        'text-accent-ink',
+        'border-[color-mix(in_oklab,var(--color-accent)_35%,var(--color-rule))]',
+        'bg-[color-mix(in_oklab,var(--color-accent)_6%,var(--color-surface))]',
+      ],
+      outline: 'shadow-none',
+      raised: 'shadow-[var(--shadow-raised)]',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+})
+
+export type CardVariants = VariantProps<typeof cardStyles>
+export type CardProps = HTMLAttributes<HTMLDivElement> & CardVariants
+
+export function Card({ variant, className, ...props }: CardProps) {
+  return <div {...props} className={cn(cardStyles({ variant }), className)} />
+}
+
+/* =========================================================================
+   PressableCard — same chrome + variants, rendered as a keyboard-focusable
+   RAC Button. Hover lifts the shadow, press sinks 1px, focus shows indigo ring.
+   ========================================================================= */
+
+const pressableCardStyles = tv({
+  extend: cardStyles,
+  base: [
+    'text-left w-full cursor-pointer outline-none',
+    'transition-[box-shadow,transform,border-color] duration-150',
+    'hover:shadow-[var(--shadow-raised)] hover:border-ink-4',
+    'pressed:translate-y-px',
+    'focus-visible:shadow-[var(--shadow-focus)]',
+    'disabled:opacity-45 disabled:cursor-not-allowed disabled:pointer-events-none',
+  ],
+})
+
+export type PressableCardProps = AriaButtonProps & CardVariants
+
+export function PressableCard({ variant, className, ...props }: PressableCardProps) {
+  return (
+    <AriaButton
+      {...props}
+      className={(renderProps) =>
+        cn(
+          pressableCardStyles({ variant }),
+          typeof className === 'function' ? className(renderProps) : className,
+        )
+      }
+    />
+  )
+}
+
+/* =========================================================================
+   Structural slots — each owns its padding. Drop-in composable.
+   ========================================================================= */
+
+/**
+ * Flush, full-bleed strip at the top of a Card.
+ * Sand-tinted surface, uppercase mono, anchors a record identifier / status.
+ * The strip bleeds to the card edges because the Card has no padding.
+ */
+export function CardHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      {...props}
+      className={cn(
+        'flex justify-between items-center',
+        'px-5 py-5 border-b border-rule',
+        'bg-[color-mix(in_oklab,var(--color-surface-2)_60%,var(--color-surface))]',
+        'font-mono text-[11.5px] uppercase tracking-[0.06em] text-ink-4',
+        className,
+      )}
+    />
+  )
+}
+
+/**
+ * Padded content block. This is where inline slots (CardEyebrow, CardTitle,
+ * CardBody) must live — they do not carry their own padding. Repeatable for
+ * multi-section layouts; separate sections with a `<hr class="border-rule"/>`.
+ */
+export function CardContent({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div {...props} className={cn('flex flex-col gap-3 p-5', className)} />
+}
+
+/**
+ * Footer anchored to the bottom of the card via `mt-auto`. Place a
+ * `<Separator />` above it when you want the dashed divider.
+ * Mono meta-sized text. Typically holds counts + a trailing arrow / action.
+ */
+export function CardFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      {...props}
+      className={cn(
+        'mt-auto flex justify-between items-center',
+        'px-5 py-4',
+        'font-mono text-[11.5px] text-ink-4',
+        className,
+      )}
+    />
+  )
+}
+
+/* =========================================================================
+   Inline slots — no self-padding; must live inside CardContent / CardHeader.
+   ========================================================================= */
+
+export function CardEyebrow({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      {...props}
+      className={cn(
+        'flex justify-between items-center',
+        'font-mono text-[11px] uppercase tracking-[0.08em] text-ink-4',
+        className,
+      )}
+    />
+  )
+}
+
+export function CardTitle({ className, ...props }: HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h3
+      {...props}
+      className={cn(
+        'font-sans font-medium text-[20px] leading-[1.25] tracking-[-0.015em] text-ink',
+        className,
+      )}
+    />
+  )
+}
+
+export function CardFeatureTitle({ className, ...props }: HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h3
+      {...props}
+      className={cn(
+        'font-sans font-medium text-[26px] leading-[1.2] tracking-[-0.02em] text-ink',
+        className,
+      )}
+    />
+  )
+}
+
+export function CardBody({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div {...props} className={cn('text-[14px] leading-[1.55] text-ink-3', className)} />
+}

package/src/components/card/index.ts

@@ -0,0 +1,13 @@
+export type { CardProps, CardVariants, PressableCardProps } from './card'
+export {
+  Card,
+  CardBody,
+  CardContent,
+  CardEyebrow,
+  CardFeatureTitle,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  cardStyles,
+  PressableCard,
+} from './card'