@tribepad/themis 1.0.6 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tribepad/themis",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Accessible React component library built on React Aria primitives",
   "author": "Tribepad <mbasford@tribepad.com>",
   "license": "MIT",
@@ -130,38 +130,38 @@
     "react-aria": "^3.35.0",
     "react-aria-components": "^1.5.0",
     "react-stately": "^3.33.0",
-    "tailwind-merge": "^3.4.0"
+    "tailwind-merge": "^3.5.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.0.0",
+    "@eslint/js": "^9.39.3",
     "@size-limit/preset-small-lib": "^11.0.0",
-    "@storybook/addon-a11y": "^10.2.8",
-    "@storybook/react-vite": "^10.2.8",
-    "@tailwindcss/vite": "^4.1.18",
+    "@storybook/addon-a11y": "^10.2.10",
+    "@storybook/react-vite": "^10.2.10",
+    "@tailwindcss/vite": "^4.2.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.0.0",
-    "@types/node": "^25.2.2",
-    "@types/react": "^19.0.0",
+    "@types/node": "^25.3.5",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.0.0",
-    "@typescript-eslint/eslint-plugin": "^8.0.0",
-    "@typescript-eslint/parser": "^8.0.0",
-    "@vitejs/plugin-react": "^5.1.3",
+    "@typescript-eslint/eslint-plugin": "^8.56.1",
+    "@typescript-eslint/parser": "^8.56.1",
+    "@vitejs/plugin-react": "^5.1.4",
     "@vitest/coverage-v8": "^4.0.0",
     "eslint": "^9.0.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "globals": "^17.3.0",
-    "happy-dom": "^20.5.3",
+    "happy-dom": "^20.7.0",
     "jest-axe": "^10.0.0",
-    "jsdom": "^28.0.0",
+    "jsdom": "^28.1.0",
     "lucide-react": ">=0.400.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "size-limit": "^11.0.0",
-    "storybook": "^10.2.8",
+    "storybook": "^10.2.10",
     "tsup": "^8.0.0",
     "tsx": "^4.0.0",
-    "typescript": "^5.6.0",
+    "typescript": "^5.9.3",
     "vitest": "^4.0.18",
     "zod": "^4.3.6"
   },

package/src/elements/Tabs/Tabs.stories.tsx

@@ -26,8 +26,8 @@ const meta = {
   argTypes: {
     variant: {
       control: 'select',
-      options: ['default', 'block'],
-      description: 'Visual variant: underline (default) or block/pill',
+      options: ['default', 'block', 'stepper'],
+      description: 'Visual variant: underline (default), block/pill, or stepper (numbered steps)',
     },
     orientation: {
       control: 'select',
@@ -131,6 +131,235 @@ export const Block: Story = {
   ),
 };
 
+// ============================================================================
+// Stepper Variant Stories
+// ============================================================================
+
+/**
+ * Stepper: Numbered step circles with connecting lines.
+ * Completed steps show a checkmark, the active step is highlighted.
+ */
+export const Stepper: Story = {
+  render: () => (
+    <Tabs variant="stepper" defaultSelectedKey="form" className="w-[600px]">
+      <TabList aria-label="Blueprint setup steps">
+        <Tab id="details">Job Details</Tab>
+        <Tab id="form">Application Form</Tab>
+        <Tab id="statuses">Statuses</Tab>
+        <Tab id="journeys">Journeys</Tab>
+      </TabList>
+      <TabPanel id="details">
+        <div className="p-4">
+          <h3 className="text-lg font-semibold mb-2">Job Details</h3>
+          <p className="text-sm text-[var(--muted-foreground)]">
+            Configure the basic job information and requirements.
+          </p>
+        </div>
+      </TabPanel>
+      <TabPanel id="form">
+        <div className="p-4">
+          <h3 className="text-lg font-semibold mb-2">Application Form</h3>
+          <p className="text-sm text-[var(--muted-foreground)]">
+            Build the candidate application form with fields and sections.
+          </p>
+        </div>
+      </TabPanel>
+      <TabPanel id="statuses">
+        <div className="p-4">
+          <h3 className="text-lg font-semibold mb-2">Statuses</h3>
+          <p className="text-sm text-[var(--muted-foreground)]">
+            Define the status workflow for applications.
+          </p>
+        </div>
+      </TabPanel>
+      <TabPanel id="journeys">
+        <div className="p-4">
+          <h3 className="text-lg font-semibold mb-2">Journeys</h3>
+          <p className="text-sm text-[var(--muted-foreground)]">
+            Configure candidate journeys for each status.
+          </p>
+        </div>
+      </TabPanel>
+    </Tabs>
+  ),
+};
+
+/**
+ * StepperFirstStep: Stepper with the first step active (no completed steps).
+ */
+export const StepperFirstStep: Story = {
+  render: () => (
+    <Tabs variant="stepper" defaultSelectedKey="details" className="w-[600px]">
+      <TabList aria-label="Setup wizard">
+        <Tab id="details">Details</Tab>
+        <Tab id="form">Form</Tab>
+        <Tab id="statuses">Statuses</Tab>
+        <Tab id="journeys">Journeys</Tab>
+      </TabList>
+      <TabPanel id="details">
+        <div className="p-4">
+          <h3 className="text-lg font-semibold mb-2">Step 1: Details</h3>
+          <p className="text-sm text-[var(--muted-foreground)]">
+            First step is active. No completed steps yet.
+          </p>
+        </div>
+      </TabPanel>
+      <TabPanel id="form">
+        <div className="p-4">Step 2 content</div>
+      </TabPanel>
+      <TabPanel id="statuses">
+        <div className="p-4">Step 3 content</div>
+      </TabPanel>
+      <TabPanel id="journeys">
+        <div className="p-4">Step 4 content</div>
+      </TabPanel>
+    </Tabs>
+  ),
+};
+
+/**
+ * StepperLastStep: Stepper with the last step active (all previous completed).
+ */
+export const StepperLastStep: Story = {
+  render: () => (
+    <Tabs variant="stepper" defaultSelectedKey="journeys" className="w-[600px]">
+      <TabList aria-label="Setup wizard">
+        <Tab id="details">Details</Tab>
+        <Tab id="form">Form</Tab>
+        <Tab id="statuses">Statuses</Tab>
+        <Tab id="journeys">Journeys</Tab>
+      </TabList>
+      <TabPanel id="details">
+        <div className="p-4">Step 1 content</div>
+      </TabPanel>
+      <TabPanel id="form">
+        <div className="p-4">Step 2 content</div>
+      </TabPanel>
+      <TabPanel id="statuses">
+        <div className="p-4">Step 3 content</div>
+      </TabPanel>
+      <TabPanel id="journeys">
+        <div className="p-4">
+          <h3 className="text-lg font-semibold mb-2">Step 4: Journeys</h3>
+          <p className="text-sm text-[var(--muted-foreground)]">
+            All previous steps show checkmarks as completed.
+          </p>
+        </div>
+      </TabPanel>
+    </Tabs>
+  ),
+};
+
+/**
+ * StepperControlled: Stepper with external step navigation controls.
+ */
+export const StepperControlled: Story = {
+  render: function StepperControlledDemo() {
+    const steps = ['details', 'form', 'statuses', 'journeys'] as const;
+    const [selected, setSelected] = useState<Key>('details');
+    const currentIndex = steps.indexOf(selected as typeof steps[number]);
+
+    return (
+      <div className="w-[600px]">
+        <Tabs variant="stepper" selectedKey={selected} onSelectionChange={setSelected}>
+          <TabList aria-label="Controlled stepper">
+            <Tab id="details">Details</Tab>
+            <Tab id="form">Form</Tab>
+            <Tab id="statuses">Statuses</Tab>
+            <Tab id="journeys">Journeys</Tab>
+          </TabList>
+          <TabPanel id="details">
+            <div className="p-4">Step 1: Configure details</div>
+          </TabPanel>
+          <TabPanel id="form">
+            <div className="p-4">Step 2: Build the form</div>
+          </TabPanel>
+          <TabPanel id="statuses">
+            <div className="p-4">Step 3: Define statuses</div>
+          </TabPanel>
+          <TabPanel id="journeys">
+            <div className="p-4">Step 4: Set up journeys</div>
+          </TabPanel>
+        </Tabs>
+        <div className="flex justify-between mt-4 px-4">
+          <button
+            onClick={() => currentIndex > 0 && setSelected(steps[currentIndex - 1])}
+            disabled={currentIndex === 0}
+            className="px-4 py-2 text-sm rounded-md bg-[var(--secondary)] text-[var(--secondary-foreground)] disabled:opacity-50"
+          >
+            Previous
+          </button>
+          <button
+            onClick={() => currentIndex < steps.length - 1 && setSelected(steps[currentIndex + 1])}
+            disabled={currentIndex === steps.length - 1}
+            className="px-4 py-2 text-sm rounded-md bg-[var(--primary)] text-[var(--primary-foreground)] disabled:opacity-50"
+          >
+            Next
+          </button>
+        </div>
+      </div>
+    );
+  },
+};
+
+/**
+ * StepperWithDisabledTabs: Stepper with some tabs disabled.
+ */
+export const StepperWithDisabledTabs: Story = {
+  render: () => (
+    <Tabs variant="stepper" defaultSelectedKey="form" disabledKeys={['journeys']} className="w-[600px]">
+      <TabList aria-label="Steps with disabled">
+        <Tab id="details">Details</Tab>
+        <Tab id="form">Form</Tab>
+        <Tab id="statuses">Statuses</Tab>
+        <Tab id="journeys">Journeys</Tab>
+      </TabList>
+      <TabPanel id="details">
+        <div className="p-4">Step 1 content</div>
+      </TabPanel>
+      <TabPanel id="form">
+        <div className="p-4">
+          <h3 className="text-lg font-semibold mb-2">Step 2: Form</h3>
+          <p className="text-sm text-[var(--muted-foreground)]">
+            The &quot;Journeys&quot; step is disabled and cannot be selected.
+          </p>
+        </div>
+      </TabPanel>
+      <TabPanel id="statuses">
+        <div className="p-4">Step 3 content</div>
+      </TabPanel>
+      <TabPanel id="journeys">
+        <div className="p-4">Step 4 content (disabled)</div>
+      </TabPanel>
+    </Tabs>
+  ),
+};
+
+/**
+ * StepperTwoSteps: Minimal stepper with only 2 steps.
+ */
+export const StepperTwoSteps: Story = {
+  render: () => (
+    <Tabs variant="stepper" defaultSelectedKey="review" className="w-[400px]">
+      <TabList aria-label="Two-step process">
+        <Tab id="configure">Configure</Tab>
+        <Tab id="review">Review</Tab>
+      </TabList>
+      <TabPanel id="configure">
+        <div className="p-4">Configuration step content</div>
+      </TabPanel>
+      <TabPanel id="review">
+        <div className="p-4">
+          <h3 className="text-lg font-semibold mb-2">Review</h3>
+          <p className="text-sm text-[var(--muted-foreground)]">
+            The first step shows a checkmark. This is the active step.
+          </p>
+        </div>
+      </TabPanel>
+    </Tabs>
+  ),
+};
+
 // ============================================================================
 // Orientation Stories
 // ============================================================================