@tribepad/themis 1.3.1 → 1.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tribepad/themis",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "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,30 @@ 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>
+  ),
+};
+
 /** Rail items that navigate via href */
 export const LinkItems: Story = {
   render: () => (