@tribepad/themis 1.1.0 → 1.1.2

package/package.json

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

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

@@ -15,6 +15,7 @@ import {
 } from 'lucide-react';
 import { Sidebar } from './SidebarCompound';
 import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '../Accordion';
+import { Skeleton } from '../Skeleton';
 import type { SidebarRailVariant } from './Sidebar.types';
 
 const meta = {
@@ -54,6 +55,34 @@ function PanelContentForItem({ id }: { id: string }): ReactElement {
   );
 }
 
+/**
+ * Fixed-width placeholder shown in place of real children while the
+ * panel is mid-collapse / mid-expand. Because the layout's intrinsic
+ * width never depends on the content, nothing reflows as the panel's
+ * `max-width` animates between 0 and its expanded value.
+ */
+function PanelSkeletonForWidth({
+  width,
+  rows = 4,
+}: {
+  width: 'sm' | 'md' | 'lg' | 'xl';
+  rows?: number;
+}): ReactElement {
+  const widthPx = { sm: 220, md: 280, lg: 340, xl: 420 }[width];
+  return (
+    <div aria-hidden="true" style={{ width: `${widthPx}px` }} className="shrink-0">
+      <div className="flex items-center px-3 py-2 border-b border-[var(--border)] h-[40px]">
+        <Skeleton variant="text" className="h-4 w-[100px]" />
+      </div>
+      <div className="flex flex-col gap-2 p-3">
+        {Array.from({ length: rows }).map((_, i) => (
+          <Skeleton key={i} variant="text" className="h-3" style={{ width: `${widthPx - 60 - i * 12}px` }} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
 const NAV_ITEMS = [
   { id: 'home', icon: <Home />, label: 'Home' },
   { id: 'inbox', icon: <Inbox />, label: 'Inbox' },
@@ -74,12 +103,14 @@ function SidebarDemo({
   showPanel = true,
   showPopovers = false,
   showBadges = false,
+  withSkeleton = true,
   railVariant = 'default' as SidebarRailVariant,
 }: {
   defaultCollapsed?: boolean;
   showPanel?: boolean;
   showPopovers?: boolean;
   showBadges?: boolean;
+  withSkeleton?: boolean;
   railVariant?: SidebarRailVariant;
 }): ReactElement {
   const [activeId, setActiveId] = useState('home');
@@ -108,7 +139,11 @@ function SidebarDemo({
           ))}
         </Sidebar.Rail>
         {showPanel && (
-          <Sidebar.Panel width="md" aria-label={`${activeId} details`}>
+          <Sidebar.Panel
+            width="md"
+            aria-label={`${activeId} details`}
+            skeleton={withSkeleton ? <PanelSkeletonForWidth width="md" /> : undefined}
+          >
             <PanelContentForItem id={activeId} />
           </Sidebar.Panel>
         )}
@@ -147,6 +182,16 @@ export const WithPopovers: Story = {
   render: () => <SidebarDemo showPopovers />,
 };
 
+/**
+ * Same as `Default` but without the panel `skeleton` prop — content is
+ * rendered directly inside the panel as it animates. Sub-nav text wraps
+ * and unwraps as the panel resizes; toggle the collapse button to see
+ * the difference vs. the skeleton-enabled stories.
+ */
+export const WithoutSkeleton: Story = {
+  render: () => <SidebarDemo withSkeleton={false} />,
+};
+
 /** Badge counts on rail items (including 99+ cap) */
 export const WithBadges: Story = {
   render: () => <SidebarDemo showBadges />,