@tribepad/themis 1.8.1 → 1.9.0

package/package.json

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

package/src/elements/Modal/Modal.stories.tsx

@@ -11,6 +11,7 @@ import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Modal } from './Modal';
 import { Button } from '../Button';
+import { Tabs, TabList, Tab, TabPanel } from '../Tabs';
 
 const meta = {
   title: 'Elements/Modal',
@@ -128,28 +129,30 @@ export const WithForm: Story = {
             alert('Form submitted!');
           }}
         >
-          <div className="grid gap-4 py-4">
-            <div className="grid grid-cols-4 items-center gap-4">
-              <label htmlFor="name" className="text-right">
-                Name
-              </label>
-              <input
-                id="name"
-                defaultValue="Pedro Duarte"
-                className="col-span-3 px-3 py-2 rounded-md border border-[var(--border)] bg-[var(--background)]"
-              />
+          <Modal.Body>
+            <div className="grid gap-4">
+              <div className="grid grid-cols-4 items-center gap-4">
+                <label htmlFor="name" className="text-right">
+                  Name
+                </label>
+                <input
+                  id="name"
+                  defaultValue="Pedro Duarte"
+                  className="col-span-3 px-3 py-2 rounded-md border border-[var(--border)] bg-[var(--background)]"
+                />
+              </div>
+              <div className="grid grid-cols-4 items-center gap-4">
+                <label htmlFor="username" className="text-right">
+                  Username
+                </label>
+                <input
+                  id="username"
+                  defaultValue="@peduarte"
+                  className="col-span-3 px-3 py-2 rounded-md border border-[var(--border)] bg-[var(--background)]"
+                />
+              </div>
             </div>
-            <div className="grid grid-cols-4 items-center gap-4">
-              <label htmlFor="username" className="text-right">
-                Username
-              </label>
-              <input
-                id="username"
-                defaultValue="@peduarte"
-                className="col-span-3 px-3 py-2 rounded-md border border-[var(--border)] bg-[var(--background)]"
-              />
-            </div>
-          </div>
+          </Modal.Body>
           <Modal.Footer>
             <Modal.Close>
               <Button variant="outline">Cancel</Button>
@@ -162,6 +165,70 @@ export const WithForm: Story = {
   ),
 };
 
+/**
+ * Tabbed Modal
+ *
+ * A full-width tab strip below the title switches the modal body. The React
+ * Aria `<Tabs>` provider wraps both the `Modal.Tabs` (tablist) and `Modal.Body`
+ * (panels) so selection is shared across the two regions. The `<Tabs>` element
+ * gets `flex min-h-0 flex-1 flex-col` so the body grows and scrolls while the
+ * header and tab strip stay pinned.
+ */
+export const TabbedModal: Story = {
+  render: () => (
+    <Modal>
+      <Modal.Trigger>
+        <Button>Edit profile</Button>
+      </Modal.Trigger>
+      <Modal.Content size="lg">
+        <Modal.Header>
+          <Modal.Title>Edit profile</Modal.Title>
+          <Modal.Description>
+            Update your details across the sections below.
+          </Modal.Description>
+        </Modal.Header>
+        <Tabs
+          defaultSelectedKey="details"
+          className="flex min-h-0 flex-1 flex-col"
+        >
+          <Modal.Tabs>
+            <TabList aria-label="Profile sections">
+              <Tab id="details">Details</Tab>
+              <Tab id="activity">Activity</Tab>
+              <Tab id="settings">Settings</Tab>
+            </TabList>
+          </Modal.Tabs>
+          <Modal.Body>
+            <TabPanel id="details">
+              <p className="text-sm">
+                Your name, contact details, and profile photo live here.
+              </p>
+            </TabPanel>
+            <TabPanel id="activity">
+              <p className="text-sm">
+                A chronological feed of recent account activity.
+              </p>
+            </TabPanel>
+            <TabPanel id="settings">
+              <p className="text-sm">
+                Notification, privacy, and accessibility preferences.
+              </p>
+            </TabPanel>
+          </Modal.Body>
+        </Tabs>
+        <Modal.Footer>
+          <Modal.Close>
+            <Button variant="outline">Cancel</Button>
+          </Modal.Close>
+          <Modal.Close>
+            <Button>Save changes</Button>
+          </Modal.Close>
+        </Modal.Footer>
+      </Modal.Content>
+    </Modal>
+  ),
+};
+
 /**
  * Long Content
  * Modal with scrolling content
@@ -180,7 +247,7 @@ export const LongContent: Story = {
             Please read and accept our terms of service to continue.
           </Modal.Description>
         </Modal.Header>
-        <div className="max-h-[400px] overflow-y-auto pr-4">
+        <Modal.Body>
           <div className="space-y-4">
             <h3 className="font-semibold">1. Acceptance of Terms</h3>
             <p className="text-sm text-[var(--muted-foreground)]">
@@ -230,7 +297,7 @@ export const LongContent: Story = {
               risk.
             </p>
           </div>
-        </div>
+        </Modal.Body>
         <Modal.Footer>
           <Modal.Close>
             <Button variant="outline">Decline</Button>
@@ -296,11 +363,11 @@ export const NoDescription: Story = {
         <Modal.Header>
           <Modal.Title>Quick Confirmation</Modal.Title>
         </Modal.Header>
-        <div className="py-4">
+        <Modal.Body>
           <p className="text-sm">
             Are you sure you want to proceed with this action?
           </p>
-        </div>
+        </Modal.Body>
         <Modal.Footer>
           <Modal.Close>
             <Button variant="outline">Cancel</Button>
@@ -337,11 +404,11 @@ export const NotDismissable: Story = {
             Escape. You must select one of the options below.
           </Modal.Description>
         </Modal.Header>
-        <div className="py-4">
+        <Modal.Body>
           <p className="text-sm text-[var(--muted-foreground)]">
             Please review the terms and conditions before proceeding.
           </p>
-        </div>
+        </Modal.Body>
         <Modal.Footer>
           <Modal.Close>
             <Button variant="outline">Decline</Button>
@@ -425,7 +492,7 @@ export const AllThemes: Story = {
               light, dark, high contrast, and colorblind themes.
             </Modal.Description>
           </Modal.Header>
-          <div className="space-y-4 py-4">
+          <Modal.Body className="space-y-4">
             <div className="rounded-md bg-[var(--muted)] p-4">
               <p className="text-sm">
                 Background: <code>var(--background)</code>
@@ -437,7 +504,7 @@ export const AllThemes: Story = {
                 Border: <code>var(--border)</code>
               </p>
             </div>
-          </div>
+          </Modal.Body>
           <Modal.Footer>
             <Modal.Close>
               <Button variant="outline">Close</Button>