@tribepad/themis 1.1.3 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tribepad/themis",
-  "version": "1.1.3",
+  "version": "1.3.0",
   "description": "Accessible React component library built on React Aria primitives",
   "author": "Tribepad <mbasford@tribepad.com>",
   "license": "MIT",
@@ -250,6 +250,11 @@
       "name": "Sidebar only",
       "path": "dist/elements/Sidebar/index.mjs",
       "limit": "35 KB"
+    },
+    {
+      "name": "PageTitle only",
+      "path": "dist/elements/PageTitle/index.mjs",
+      "limit": "60 KB"
     }
   ],
   "keywords": [

package/src/elements/PageTitle/PageTitle.stories.tsx

@@ -0,0 +1,288 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Plus } from 'lucide-react';
+import { Button } from '../Button';
+import { PageTitle } from './PageTitle';
+
+const BREADCRUMB_ITEMS = [
+  { id: 'home', label: 'Dashboard', href: '/' },
+  { id: 'forms', label: 'Forms' },
+];
+
+const LONG_BREADCRUMB_ITEMS = [
+  { id: 'home', label: 'Dashboard', href: '/' },
+  { id: 'bp', label: 'Blueprint', href: '/blueprint' },
+  { id: 'fields', label: 'Field library' },
+];
+
+const meta = {
+  title: 'Elements/PageTitle',
+  component: PageTitle,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Accessible page header for listing and landing pages. Two variants — `default` (light card) and `feature` (primary gradient). Compound sub-components: `PageTitle.Breadcrumbs`, `PageTitle.Heading`, `PageTitle.Description`, `PageTitle.Actions`, `PageTitle.Tabs`. Renders as a semantic `<header>` landmark.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof PageTitle>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// =============================================================================
+// Default variant
+// =============================================================================
+
+export const Default: Story = {
+  render: () => (
+    <PageTitle variant="default">
+      <PageTitle.Breadcrumbs items={BREADCRUMB_ITEMS} />
+      <PageTitle.Heading>Forms</PageTitle.Heading>
+      <PageTitle.Description>
+        Build and manage reusable forms for applications, interviews, screening, and onboarding.
+      </PageTitle.Description>
+      <PageTitle.Actions>
+        <Button size="default">
+          <Plus aria-hidden="true" />
+          Create Form
+        </Button>
+      </PageTitle.Actions>
+    </PageTitle>
+  ),
+};
+
+export const DefaultMinimal: Story = {
+  render: () => (
+    <PageTitle variant="default">
+      <PageTitle.Heading>Dashboard</PageTitle.Heading>
+    </PageTitle>
+  ),
+};
+
+export const DefaultNoDescription: Story = {
+  render: () => (
+    <PageTitle variant="default">
+      <PageTitle.Breadcrumbs items={BREADCRUMB_ITEMS} />
+      <PageTitle.Heading>Forms</PageTitle.Heading>
+      <PageTitle.Actions>
+        <Button size="default">
+          <Plus aria-hidden="true" />
+          Create Form
+        </Button>
+      </PageTitle.Actions>
+    </PageTitle>
+  ),
+};
+
+export const DefaultNoActions: Story = {
+  render: () => (
+    <PageTitle variant="default">
+      <PageTitle.Breadcrumbs items={BREADCRUMB_ITEMS} />
+      <PageTitle.Heading>Forms</PageTitle.Heading>
+      <PageTitle.Description>
+        A read-only listing page — no primary action.
+      </PageTitle.Description>
+    </PageTitle>
+  ),
+};
+
+export const DefaultWithTabs: Story = {
+  render: () => (
+    <PageTitle variant="default">
+      <PageTitle.Breadcrumbs
+        items={[
+          { id: 'home', label: 'Settings', href: '/settings' },
+          { id: 'careers', label: 'Careers Site' },
+        ]}
+      />
+      <PageTitle.Heading as="h2">Careers Site</PageTitle.Heading>
+      <PageTitle.Description>
+        Manage the public careers site pages and branding.
+      </PageTitle.Description>
+      <PageTitle.Tabs>
+        <nav aria-label="Site sections" className="flex gap-4 border-b border-[var(--border)]">
+          <a href="/pages" className="px-3 py-2 border-b-2 border-[var(--primary)]">
+            Page Builder
+          </a>
+          <a href="/pages/theme" className="px-3 py-2">
+            Theme
+          </a>
+          <a href="/pages/domain" className="px-3 py-2">
+            Domain
+          </a>
+        </nav>
+      </PageTitle.Tabs>
+    </PageTitle>
+  ),
+};
+
+// =============================================================================
+// Feature variant
+// =============================================================================
+
+export const Feature: Story = {
+  render: () => (
+    <PageTitle variant="feature">
+      <PageTitle.Breadcrumbs items={BREADCRUMB_ITEMS} />
+      <PageTitle.Heading>Forms</PageTitle.Heading>
+      <PageTitle.Description>
+        Build and manage reusable forms for applications, interviews, screening, and onboarding.
+      </PageTitle.Description>
+      <PageTitle.Actions>
+        <Button size="default">
+          <Plus aria-hidden="true" />
+          Create Form
+        </Button>
+      </PageTitle.Actions>
+    </PageTitle>
+  ),
+};
+
+export const FeatureMinimal: Story = {
+  render: () => (
+    <PageTitle variant="feature">
+      <PageTitle.Heading>Welcome</PageTitle.Heading>
+    </PageTitle>
+  ),
+};
+
+export const FeatureWithTabs: Story = {
+  render: () => (
+    <PageTitle variant="feature">
+      <PageTitle.Breadcrumbs items={LONG_BREADCRUMB_ITEMS} />
+      <PageTitle.Heading>Field library</PageTitle.Heading>
+      <PageTitle.Description>
+        Reusable form fields, shared across every form in your organisation.
+      </PageTitle.Description>
+      <PageTitle.Actions>
+        <Button size="default">
+          <Plus aria-hidden="true" />
+          Create Field
+        </Button>
+      </PageTitle.Actions>
+      <PageTitle.Tabs>
+        <nav
+          aria-label="Library sections"
+          className="flex gap-4 bg-[var(--content-background)] px-4 py-2"
+        >
+          <a href="/fields">All fields</a>
+          <a href="/fields/groups">Groups</a>
+          <a href="/fields/categories">Categories</a>
+        </nav>
+      </PageTitle.Tabs>
+    </PageTitle>
+  ),
+};
+
+export const FeatureLongTitle: Story = {
+  name: 'Feature · Long title (reflow check)',
+  render: () => (
+    <PageTitle variant="feature">
+      <PageTitle.Breadcrumbs items={BREADCRUMB_ITEMS} />
+      <PageTitle.Heading>
+        A deliberately very long page title that must wrap onto multiple lines without breaking the
+        layout at any viewport width
+      </PageTitle.Heading>
+      <PageTitle.Description>
+        Long titles keep the description column and the action button column from overlapping — the
+        actions wrap beneath the body on narrow viewports.
+      </PageTitle.Description>
+      <PageTitle.Actions>
+        <Button size="default">
+          <Plus aria-hidden="true" />
+          Create
+        </Button>
+      </PageTitle.Actions>
+    </PageTitle>
+  ),
+};
+
+export const FeatureLongDescription: Story = {
+  name: 'Feature · Long description',
+  render: () => (
+    <PageTitle variant="feature">
+      <PageTitle.Breadcrumbs items={BREADCRUMB_ITEMS} />
+      <PageTitle.Heading>Forms</PageTitle.Heading>
+      <PageTitle.Description>
+        This supporting text intentionally spans multiple lines so that the vertical rhythm between
+        the title, the description, and the action button can be assessed — recruiters read this
+        copy once per landing and it must feel like a single coherent block, not an afterthought
+        crammed beneath a button.
+      </PageTitle.Description>
+      <PageTitle.Actions>
+        <Button size="default">
+          <Plus aria-hidden="true" />
+          Create Form
+        </Button>
+      </PageTitle.Actions>
+    </PageTitle>
+  ),
+};
+
+export const FeatureRTL: Story = {
+  name: 'Feature · RTL',
+  render: () => (
+    <div dir="rtl">
+      <PageTitle variant="feature">
+        <PageTitle.Breadcrumbs
+          items={[
+            { id: 'home', label: 'لوحة التحكم', href: '/' },
+            { id: 'forms', label: 'النماذج' },
+          ]}
+        />
+        <PageTitle.Heading>النماذج</PageTitle.Heading>
+        <PageTitle.Description>
+          أنشئ وأدر نماذج قابلة للاستخدام عبر جميع المراحل.
+        </PageTitle.Description>
+        <PageTitle.Actions>
+          <Button size="default">
+            <Plus aria-hidden="true" />
+            إنشاء نموذج
+          </Button>
+        </PageTitle.Actions>
+      </PageTitle>
+    </div>
+  ),
+};
+
+// =============================================================================
+// A11y — dedicated audit story for addon-a11y
+// =============================================================================
+
+export const A11yAudit: Story = {
+  name: 'A11y audit (AAA)',
+  parameters: {
+    a11y: {
+      config: {
+        rules: [{ id: 'color-contrast-enhanced', enabled: true }],
+      },
+    },
+  },
+  render: () => (
+    <div className="flex flex-col gap-8">
+      <PageTitle variant="default">
+        <PageTitle.Breadcrumbs items={BREADCRUMB_ITEMS} />
+        <PageTitle.Heading>Default variant</PageTitle.Heading>
+        <PageTitle.Description>Verified against WCAG 2.2 AAA rules.</PageTitle.Description>
+        <PageTitle.Actions>
+          <Button size="default">
+            Create
+          </Button>
+        </PageTitle.Actions>
+      </PageTitle>
+      <PageTitle variant="feature">
+        <PageTitle.Breadcrumbs items={BREADCRUMB_ITEMS} />
+        <PageTitle.Heading>Feature variant</PageTitle.Heading>
+        <PageTitle.Description>Verified against WCAG 2.2 AAA rules.</PageTitle.Description>
+        <PageTitle.Actions>
+          <Button size="default">
+            Create
+          </Button>
+        </PageTitle.Actions>
+      </PageTitle>
+    </div>
+  ),
+};

package/src/elements/Wizard/Wizard.stories.tsx

@@ -0,0 +1,285 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState, type ReactElement } from 'react';
+import { Image, Palette, Sparkles, Upload, CheckCircle } from 'lucide-react';
+import { Wizard } from './Wizard';
+import type { WizardStepDescriptor } from './Wizard.types';
+
+const STEPS: WizardStepDescriptor[] = [
+  { id: 'welcome', label: 'Welcome', description: 'Getting started' },
+  { id: 'logo', label: 'Logo', description: 'Upload your company logo' },
+  { id: 'colours', label: 'Colours', description: 'Choose your brand colours' },
+  { id: 'image', label: 'Login image', description: 'Upload a login image' },
+  { id: 'done', label: 'All done' },
+];
+
+const meta = {
+  title: 'Elements/Wizard',
+  component: Wizard,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Linear multi-step wizard with WCAG 2.2 AAA compliance. Compound components (Wizard.Stepper, Wizard.Content, Wizard.Step, Wizard.Navigation, Wizard.MobileProgress, Wizard.Layout) share state via context. Steps keyed by `id` (not positional index). Polite live region announces "Step N of M"; assertive region handles errors.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Wizard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function DefaultHarness(): ReactElement {
+  const [step, setStep] = useState(0);
+  return (
+    <div className="h-screen">
+      <Wizard
+        currentStep={step}
+        steps={STEPS}
+        onStepChange={(ev): void => setStep(ev.index)}
+      >
+        <Wizard.Layout
+          stepper={
+            <Wizard.Stepper sectionLabel="Branding" sectionNumber={1} totalSections={3} />
+          }
+          helpText="All steps optional — everything can be revisited later in ATS Settings."
+        >
+          <Wizard.MobileProgress />
+          <Wizard.Content>
+            <Wizard.Step id="welcome" icon={<Sparkles />}>
+              <p>Welcome to the branding setup. We&apos;ll guide you through a few steps.</p>
+            </Wizard.Step>
+            <Wizard.Step id="logo" icon={<Image />}>
+              <p>Upload your logo. SVG or PNG recommended.</p>
+            </Wizard.Step>
+            <Wizard.Step id="colours" icon={<Palette />}>
+              <p>Pick your primary and accent colours.</p>
+            </Wizard.Step>
+            <Wizard.Step id="image" icon={<Upload />}>
+              <p>Upload an image for the login screen.</p>
+            </Wizard.Step>
+            <Wizard.Step id="done" icon={<CheckCircle />}>
+              <p>That&apos;s it! You can revisit any step later.</p>
+            </Wizard.Step>
+          </Wizard.Content>
+          <Wizard.Navigation
+            showSkip
+            labels={{
+              start: "Let's go",
+              next: 'Next',
+              finish: 'Finish setup',
+              back: 'Back',
+              skip: 'Skip for now',
+            }}
+          />
+        </Wizard.Layout>
+      </Wizard>
+    </div>
+  );
+}
+
+export const Default: Story = {
+  render: () => <DefaultHarness />,
+};
+
+function WithPreviewHarness(): ReactElement {
+  const [step, setStep] = useState(1);
+  return (
+    <div className="h-screen">
+      <Wizard
+        currentStep={step}
+        steps={STEPS}
+        onStepChange={(ev): void => setStep(ev.index)}
+      >
+        <Wizard.Layout
+          stepper={
+            <Wizard.Stepper sectionLabel="Branding" sectionNumber={1} totalSections={3} />
+          }
+          preview={
+            <div>
+              <h4 className="text-sm font-semibold text-[var(--content-foreground)]">
+                Live preview
+              </h4>
+              <p className="mt-2 text-xs text-[var(--menu-muted)]">
+                Decorative aside — not exposed to assistive tech.
+              </p>
+            </div>
+          }
+          helpText="All steps optional — everything can be revisited later."
+        >
+          <Wizard.MobileProgress />
+          <Wizard.Content>
+            {STEPS.map((s) => (
+              <Wizard.Step key={s.id} id={s.id}>
+                <p>{s.label} step content</p>
+              </Wizard.Step>
+            ))}
+          </Wizard.Content>
+          <Wizard.Navigation
+            showSkip
+            labels={{ start: "Let's go", finish: 'Finish setup' }}
+          />
+        </Wizard.Layout>
+      </Wizard>
+    </div>
+  );
+}
+
+export const WithPreview: Story = {
+  render: () => <WithPreviewHarness />,
+};
+
+function MobileHarness(): ReactElement {
+  const [step, setStep] = useState(1);
+  const mobileSteps = STEPS.slice(0, 4);
+  // Override `lg:hidden` on MobileProgress so it renders at any viewport for docs.
+  // In real usage, the stepper takes over at lg+ and MobileProgress stays hidden.
+  return (
+    <div style={{ maxWidth: 420, margin: '0 auto' }} className="rounded-lg border border-[var(--border)] bg-[var(--content-background)]">
+      <Wizard
+        currentStep={step}
+        steps={mobileSteps}
+        onStepChange={(ev): void => setStep(ev.index)}
+      >
+        <Wizard.MobileProgress className="lg:flex" />
+        <div className="px-4 pb-4">
+          <Wizard.Content>
+            {mobileSteps.map((s) => (
+              <Wizard.Step key={s.id} id={s.id}>
+                <p className="text-sm text-[var(--menu-muted)]">{s.label} step body. Narrow viewport: the progress dots above replace the vertical stepper.</p>
+              </Wizard.Step>
+            ))}
+          </Wizard.Content>
+          <Wizard.Navigation showSkip />
+        </div>
+      </Wizard>
+    </div>
+  );
+}
+
+export const Mobile: Story = {
+  render: () => <MobileHarness />,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'At <1024px viewports, the vertical `Wizard.Stepper` hides and `Wizard.MobileProgress` replaces it with a role="progressbar" dot indicator. aria-valuetext announces "Step N of M: Title".',
+      },
+    },
+  },
+};
+
+function LoadingHarness(): ReactElement {
+  return (
+    <div className="h-screen">
+      <Wizard
+        currentStep={1}
+        steps={STEPS}
+        onStepChange={(): void => undefined}
+        isLoading
+      >
+        <Wizard.Stepper sectionLabel="Branding" sectionNumber={1} totalSections={3} />
+        <Wizard.Content>
+          {STEPS.map((s) => (
+            <Wizard.Step key={s.id} id={s.id}>
+              <p>{s.label} body — saving…</p>
+            </Wizard.Step>
+          ))}
+        </Wizard.Content>
+        <Wizard.Navigation />
+      </Wizard>
+    </div>
+  );
+}
+
+export const Loading: Story = {
+  render: () => <LoadingHarness />,
+};
+
+function ErrorsHarness(): ReactElement {
+  const [step, setStep] = useState(1);
+  return (
+    <div className="h-screen">
+      <Wizard
+        currentStep={step}
+        steps={STEPS}
+        onStepChange={(ev): void => setStep(ev.index)}
+        errors={['Email is required', 'Password is too short']}
+      >
+        <Wizard.Content>
+          {STEPS.map((s) => (
+            <Wizard.Step key={s.id} id={s.id}>
+              <p>{s.label} body</p>
+            </Wizard.Step>
+          ))}
+        </Wizard.Content>
+        <Wizard.Navigation />
+      </Wizard>
+    </div>
+  );
+}
+
+export const WithErrors: Story = {
+  render: () => <ErrorsHarness />,
+};
+
+function AllDoneHarness(): ReactElement {
+  return (
+    <div className="h-screen">
+      <Wizard
+        currentStep={STEPS.length - 1}
+        steps={STEPS}
+        onStepChange={(): void => undefined}
+      >
+        <Wizard.Stepper sectionLabel="Branding" sectionNumber={1} totalSections={3} />
+        <Wizard.Content>
+          {STEPS.map((s) => (
+            <Wizard.Step
+              key={s.id}
+              id={s.id}
+              icon={s.id === 'done' ? <CheckCircle /> : undefined}
+            >
+              <p>{s.label} body</p>
+            </Wizard.Step>
+          ))}
+        </Wizard.Content>
+        <Wizard.Navigation />
+      </Wizard>
+    </div>
+  );
+}
+
+export const AllDone: Story = {
+  render: () => <AllDoneHarness />,
+};
+
+function RTLHarness(): ReactElement {
+  const [step, setStep] = useState(1);
+  return (
+    <div dir="rtl" className="h-screen">
+      <Wizard
+        currentStep={step}
+        steps={STEPS.slice(0, 4)}
+        onStepChange={(ev): void => setStep(ev.index)}
+      >
+        <Wizard.Stepper sectionLabel="الإعداد" sectionNumber={1} totalSections={3} />
+        <Wizard.Content>
+          {STEPS.slice(0, 4).map((s) => (
+            <Wizard.Step key={s.id} id={s.id}>
+              <p>{s.label} body (RTL)</p>
+            </Wizard.Step>
+          ))}
+        </Wizard.Content>
+        <Wizard.Navigation
+          labels={{ back: 'رجوع', next: 'التالي', skip: 'تخطي' }}
+          showSkip
+        />
+      </Wizard>
+    </div>
+  );
+}
+
+export const RTL: Story = {
+  render: () => <RTLHarness />,
+};