@tribepad/themis 1.0.13 → 1.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tribepad/themis",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "Accessible React component library built on React Aria primitives",
   "author": "Tribepad <mbasford@tribepad.com>",
   "license": "MIT",

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

@@ -43,6 +43,11 @@ const meta = {
       control: 'boolean',
       description: 'Disable all tabs',
     },
+    separator: {
+      control: 'select',
+      options: ['line', 'chevron'],
+      description: 'Stepper separator style (horizontal stepper only)',
+    },
   },
 } satisfies Meta<typeof Tabs>;
 
@@ -360,6 +365,54 @@ export const StepperTwoSteps: Story = {
   ),
 };
 
+/**
+ * StepperChevron: Stepper with chevron separators instead of lines.
+ */
+export const StepperChevron: Story = {
+  render: () => (
+    <Tabs variant="stepper" separator="chevron" 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>
+  ),
+};
+
 // ============================================================================
 // Orientation Stories
 // ============================================================================