@tribepad/themis 1.3.2 → 1.3.4

package/package.json

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

package/src/elements/Sidebar/Sidebar.stories.tsx

@@ -197,6 +197,101 @@ export const WithBadges: Story = {
   render: () => <SidebarDemo showBadges />,
 };
 
+/**
+ * Panel header with an optional icon slot. The icon renders before the
+ * title and is automatically marked `aria-hidden` — titles already carry
+ * the meaning, so the icon is purely decorative.
+ */
+export const PanelHeaderWithIcon: Story = {
+  render: () => (
+    <div className="flex h-screen bg-[var(--page-background)]">
+      <Sidebar>
+        <Sidebar.Rail aria-label="Main navigation">
+          <Sidebar.RailItem id="inbox" icon={<Home />} label="Inbox" isActive />
+          <Sidebar.RailItem id="docs" icon={<FileText />} label="Docs" />
+        </Sidebar.Rail>
+        <Sidebar.Panel aria-label="Inbox details">
+          <Sidebar.PanelHeader title="Inbox" icon={<Home />} />
+          <div className="p-3 text-sm text-[var(--content-foreground)]">
+            Inbox contents.
+          </div>
+        </Sidebar.Panel>
+      </Sidebar>
+    </div>
+  ),
+};
+
+/**
+ * Items can opt into `placement="bottom"` to pin them to the bottom of the rail.
+ * Useful for low-frequency destinations like Settings, Admin, or Help.
+ *
+ * The rail is `flex-col` and the bottom group uses `mt-auto`, so top items keep
+ * their natural ordering while bottom items hug the rail's lower edge.
+ */
+export const RailItemBottomPlacement: Story = {
+  render: () => {
+    const [activeId, setActiveId] = useState('home');
+    return (
+      <div className="flex h-screen bg-[var(--page-background)]">
+        <Sidebar>
+          <Sidebar.Rail aria-label="Main navigation">
+            <Sidebar.CollapseButton />
+            <Sidebar.RailItem
+              id="home"
+              icon={<Home />}
+              label="Home"
+              isActive={activeId === 'home'}
+              onPress={() => setActiveId('home')}
+            />
+            <Sidebar.RailItem
+              id="inbox"
+              icon={<Inbox />}
+              label="Inbox"
+              isActive={activeId === 'inbox'}
+              onPress={() => setActiveId('inbox')}
+            />
+            <Sidebar.RailItem
+              id="docs"
+              icon={<FileText />}
+              label="Docs"
+              isActive={activeId === 'docs'}
+              onPress={() => setActiveId('docs')}
+            />
+            <Sidebar.RailItem
+              id="help"
+              icon={<HelpCircle />}
+              label="Help"
+              placement="bottom"
+              isActive={activeId === 'help'}
+              onPress={() => setActiveId('help')}
+            />
+            <Sidebar.RailItem
+              id="settings"
+              icon={<Settings />}
+              label="Settings"
+              placement="bottom"
+              isActive={activeId === 'settings'}
+              onPress={() => setActiveId('settings')}
+            />
+          </Sidebar.Rail>
+          <Sidebar.Panel width="md" aria-label={`${activeId} details`}>
+            <PanelContentForItem id={activeId} />
+          </Sidebar.Panel>
+        </Sidebar>
+        <main className="flex-1 p-6">
+          <h1 className="text-2xl font-bold text-[var(--page-foreground)]">
+            {activeId.charAt(0).toUpperCase() + activeId.slice(1)}
+          </h1>
+          <p className="mt-2 text-[var(--muted-foreground)]">
+            Help and Settings are pinned to the bottom of the rail via{' '}
+            <code className="font-mono text-xs">placement=&quot;bottom&quot;</code>.
+          </p>
+        </main>
+      </div>
+    );
+  },
+};
+
 /** Rail items that navigate via href */
 export const LinkItems: Story = {
   render: () => (