@tribepad/themis 1.4.0 → 1.5.1

package/dist/styles/animations.css

@@ -272,7 +272,7 @@
 
 @keyframes selection-pulse {
   0% { transform: scale(1); }
-  40% { transform: scale(1.15); }
+  40% { transform: scale(1.125); }
   100% { transform: scale(1); }
 }
 

package/package.json

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

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

@@ -26,8 +26,8 @@ const meta = {
   argTypes: {
     variant: {
       control: 'select',
-      options: ['default', 'block', 'stepper'],
-      description: 'Visual variant: underline (default), block/pill, or stepper (numbered steps)',
+      options: ['default', 'block', 'pill', 'stepper'],
+      description: 'Visual variant: underline (default), block (segmented), pill (independent rounded tabs), or stepper (numbered steps)',
     },
     orientation: {
       control: 'select',
@@ -48,6 +48,11 @@ const meta = {
       options: ['line', 'chevron'],
       description: 'Stepper separator style (horizontal stepper only)',
     },
+    visualSize: {
+      control: 'select',
+      options: ['sm', 'default', 'lg'],
+      description: 'Layer 2 visual size (pill variant only). Layer 1 is always 44×44px.',
+    },
   },
 } satisfies Meta<typeof Tabs>;
 
@@ -98,7 +103,7 @@ export const Default: Story = {
 };
 
 /**
- * Block: Pill/card-style variant with accent background
+ * Block: Segmented control with accent background container and card-style active tab
  */
 export const Block: Story = {
   render: () => (
@@ -136,6 +141,202 @@ export const Block: Story = {
   ),
 };
 
+// ============================================================================
+// Pill Variant Stories
+// ============================================================================
+
+/**
+ * Pill: Independent rounded tabs. Selected tab fills with primary-action colour.
+ * Each tab stands alone with a small gap between — unlike the segmented Block variant.
+ */
+export const Pill: Story = {
+  render: () => (
+    <Tabs variant="pill" defaultSelectedKey="account" className="w-[400px]">
+      <TabList aria-label="Account settings">
+        <Tab id="account">Account</Tab>
+        <Tab id="password">Password</Tab>
+        <Tab id="settings">Settings</Tab>
+      </TabList>
+      <TabPanel id="account">
+        <div className="p-4">
+          <h3 className="text-lg font-semibold mb-2">Account Information</h3>
+          <p className="text-sm text-[var(--muted-foreground)]">
+            Manage your account details and preferences.
+          </p>
+        </div>
+      </TabPanel>
+      <TabPanel id="password">
+        <div className="p-4">
+          <h3 className="text-lg font-semibold mb-2">Password Settings</h3>
+          <p className="text-sm text-[var(--muted-foreground)]">
+            Update your password and security settings.
+          </p>
+        </div>
+      </TabPanel>
+      <TabPanel id="settings">
+        <div className="p-4">
+          <h3 className="text-lg font-semibold mb-2">General Settings</h3>
+          <p className="text-sm text-[var(--muted-foreground)]">
+            Configure application preferences.
+          </p>
+        </div>
+      </TabPanel>
+    </Tabs>
+  ),
+};
+
+/**
+ * Pill with composed content: a language switcher with code chip and "Default" badge,
+ * matching the email-template editor pattern. Uses default visualSize="sm" (28px).
+ */
+export const PillWithBadges: Story = {
+  render: () => (
+    <Tabs variant="pill" defaultSelectedKey="en" className="w-[500px]">
+      <TabList aria-label="Template language">
+        <Tab id="en">
+          <span className="rounded bg-black/20 px-1 py-px text-[10px] font-bold leading-none">
+            EN
+          </span>
+          <span>English</span>
+          <span className="rounded-sm bg-white/20 px-1 py-px text-[9px] font-medium uppercase tracking-wide leading-none">
+            Default
+          </span>
+        </Tab>
+        <Tab id="fr">
+          <span className="rounded bg-black/20 px-1 py-px text-[10px] font-bold leading-none">
+            FR
+          </span>
+          <span>French</span>
+        </Tab>
+      </TabList>
+      <TabPanel id="en">
+        <div className="p-4 text-sm">English template content</div>
+      </TabPanel>
+      <TabPanel id="fr">
+        <div className="p-4 text-sm">French template content</div>
+      </TabPanel>
+    </Tabs>
+  ),
+};
+
+/**
+ * Pill sizes: Layer 1 is always 44×44px (the transparent touch target);
+ * `visualSize` controls Layer 2 only — sm (28px), default (36px), lg (44px).
+ */
+export const PillSizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-6">
+      <div>
+        <p className="mb-2 text-xs font-medium text-[var(--muted-foreground)]">
+          visualSize=&quot;sm&quot; — 28px (default for pill)
+        </p>
+        <Tabs variant="pill" visualSize="sm" defaultSelectedKey="en">
+          <TabList aria-label="Languages — sm">
+            <Tab id="en">English</Tab>
+            <Tab id="fr">French</Tab>
+          </TabList>
+          <TabPanel id="en" />
+          <TabPanel id="fr" />
+        </Tabs>
+      </div>
+      <div>
+        <p className="mb-2 text-xs font-medium text-[var(--muted-foreground)]">
+          visualSize=&quot;default&quot; — 36px
+        </p>
+        <Tabs variant="pill" visualSize="default" defaultSelectedKey="en">
+          <TabList aria-label="Languages — default">
+            <Tab id="en">English</Tab>
+            <Tab id="fr">French</Tab>
+          </TabList>
+          <TabPanel id="en" />
+          <TabPanel id="fr" />
+        </Tabs>
+      </div>
+      <div>
+        <p className="mb-2 text-xs font-medium text-[var(--muted-foreground)]">
+          visualSize=&quot;lg&quot; — 44px (fills touch target)
+        </p>
+        <Tabs variant="pill" visualSize="lg" defaultSelectedKey="en">
+          <TabList aria-label="Languages — lg">
+            <Tab id="en">English</Tab>
+            <Tab id="fr">French</Tab>
+          </TabList>
+          <TabPanel id="en" />
+          <TabPanel id="fr" />
+        </Tabs>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * Pill (vertical): pills stack with a gap, useful for sidebar navigation.
+ */
+export const PillVertical: Story = {
+  render: () => (
+    <Tabs
+      variant="pill"
+      orientation="vertical"
+      defaultSelectedKey="account"
+      className="w-[600px]"
+    >
+      <div className="flex gap-6">
+        <TabList aria-label="Account settings" className="w-[180px]">
+          <Tab id="account">Account</Tab>
+          <Tab id="password">Password</Tab>
+          <Tab id="settings">Settings</Tab>
+        </TabList>
+        <div className="flex-1">
+          <TabPanel id="account">
+            <h3 className="text-lg font-semibold mb-2">Account</h3>
+            <p className="text-sm text-[var(--muted-foreground)]">
+              Manage your account details.
+            </p>
+          </TabPanel>
+          <TabPanel id="password">
+            <h3 className="text-lg font-semibold mb-2">Password</h3>
+            <p className="text-sm text-[var(--muted-foreground)]">
+              Update password.
+            </p>
+          </TabPanel>
+          <TabPanel id="settings">
+            <h3 className="text-lg font-semibold mb-2">Settings</h3>
+            <p className="text-sm text-[var(--muted-foreground)]">
+              General preferences.
+            </p>
+          </TabPanel>
+        </div>
+      </div>
+    </Tabs>
+  ),
+};
+
+/**
+ * Pill with a disabled tab.
+ */
+export const PillDisabled: Story = {
+  render: () => (
+    <Tabs variant="pill" defaultSelectedKey="en" className="w-[400px]">
+      <TabList aria-label="Languages">
+        <Tab id="en">English</Tab>
+        <Tab id="fr">French</Tab>
+        <Tab id="de" isDisabled>
+          German
+        </Tab>
+      </TabList>
+      <TabPanel id="en">
+        <div className="p-4 text-sm">English content</div>
+      </TabPanel>
+      <TabPanel id="fr">
+        <div className="p-4 text-sm">French content</div>
+      </TabPanel>
+      <TabPanel id="de">
+        <div className="p-4 text-sm">German content</div>
+      </TabPanel>
+    </Tabs>
+  ),
+};
+
 // ============================================================================
 // Stepper Variant Stories
 // ============================================================================

package/src/elements/Tree/Tree.stories.tsx

@@ -0,0 +1,407 @@
+import { useState, type ReactElement } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import {
+  Tree,
+  TreeItem,
+  TreeItemContent,
+  TreeItemChevron,
+} from './Tree';
+import type { Selection } from './Tree.types';
+
+const meta = {
+  title: 'Elements/Tree',
+  component: Tree,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'Accessible hierarchical list built on React Aria `Tree`. Supports keyboard navigation (Arrow keys, Home/End, type-ahead), expansion, single/multiple selection, lazy children via `hasChildItems`, and custom row content.',
+      },
+    },
+  },
+  argTypes: {
+    selectionMode: {
+      control: 'select',
+      options: ['none', 'single', 'multiple'],
+    },
+    variant: {
+      control: 'select',
+      options: ['default', 'bordered'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'default', 'lg'],
+    },
+  },
+} satisfies Meta<typeof Tree>;
+
+export default meta;
+type Story = StoryObj<typeof Tree>;
+
+function Sample(): ReactElement {
+  return (
+    <Tree aria-label="Departments" className="max-w-md">
+      <TreeItem id="eng" textValue="Engineering" hasChildItems>
+        <TreeItemContent>
+          <TreeItemChevron />
+          <span>Engineering</span>
+        </TreeItemContent>
+        <TreeItem id="eng.platform" textValue="Platform" hasChildItems>
+          <TreeItemContent>
+            <TreeItemChevron />
+            <span>Platform</span>
+          </TreeItemContent>
+          <TreeItem id="eng.platform.ml" textValue="ML">
+            <TreeItemContent>
+              <TreeItemChevron hasChildItems={false} />
+              <span>ML</span>
+            </TreeItemContent>
+          </TreeItem>
+          <TreeItem id="eng.platform.observability" textValue="Observability">
+            <TreeItemContent>
+              <TreeItemChevron hasChildItems={false} />
+              <span>Observability</span>
+            </TreeItemContent>
+          </TreeItem>
+        </TreeItem>
+        <TreeItem id="eng.tooling" textValue="Tooling">
+          <TreeItemContent>
+            <TreeItemChevron hasChildItems={false} />
+            <span>Tooling</span>
+          </TreeItemContent>
+        </TreeItem>
+      </TreeItem>
+      <TreeItem id="design" textValue="Design">
+        <TreeItemContent>
+          <TreeItemChevron hasChildItems={false} />
+          <span>Design</span>
+        </TreeItemContent>
+      </TreeItem>
+    </Tree>
+  );
+}
+
+export const Default: Story = {
+  render: () => <Sample />,
+};
+
+export const Bordered: Story = {
+  render: () => (
+    <Tree aria-label="Departments" variant="bordered" className="max-w-md">
+      <TreeItem id="a" textValue="Item A">
+        <TreeItemContent>
+          <TreeItemChevron hasChildItems={false} />
+          <span>Item A</span>
+        </TreeItemContent>
+      </TreeItem>
+      <TreeItem id="b" textValue="Item B">
+        <TreeItemContent>
+          <TreeItemChevron hasChildItems={false} />
+          <span>Item B</span>
+        </TreeItemContent>
+      </TreeItem>
+    </Tree>
+  ),
+};
+
+/**
+ * Realistic ltree-shaped hierarchy used by the selection stories. Three
+ * roots, each with at least one expandable subtree. Mirrors what an EOS
+ * Job Categories taxonomy might look like.
+ */
+function LtreeSampleData(): ReactElement {
+  return (
+    <>
+      <TreeItem id="engineering" textValue="Engineering" hasChildItems>
+        <TreeItemContent>
+          <TreeItemChevron />
+          <span>Engineering</span>
+        </TreeItemContent>
+        <TreeItem id="engineering.platform" textValue="Platform" hasChildItems>
+          <TreeItemContent>
+            <TreeItemChevron />
+            <span>Platform</span>
+          </TreeItemContent>
+          <TreeItem id="engineering.platform.ml" textValue="ML">
+            <TreeItemContent>
+              <TreeItemChevron hasChildItems={false} />
+              <span>ML</span>
+            </TreeItemContent>
+          </TreeItem>
+          <TreeItem
+            id="engineering.platform.observability"
+            textValue="Observability"
+          >
+            <TreeItemContent>
+              <TreeItemChevron hasChildItems={false} />
+              <span>Observability</span>
+            </TreeItemContent>
+          </TreeItem>
+        </TreeItem>
+        <TreeItem id="engineering.tooling" textValue="Tooling" hasChildItems>
+          <TreeItemContent>
+            <TreeItemChevron />
+            <span>Tooling</span>
+          </TreeItemContent>
+          <TreeItem id="engineering.tooling.ci" textValue="CI/CD">
+            <TreeItemContent>
+              <TreeItemChevron hasChildItems={false} />
+              <span>CI/CD</span>
+            </TreeItemContent>
+          </TreeItem>
+        </TreeItem>
+      </TreeItem>
+
+      <TreeItem id="design" textValue="Design" hasChildItems>
+        <TreeItemContent>
+          <TreeItemChevron />
+          <span>Design</span>
+        </TreeItemContent>
+        <TreeItem id="design.brand" textValue="Brand">
+          <TreeItemContent>
+            <TreeItemChevron hasChildItems={false} />
+            <span>Brand</span>
+          </TreeItemContent>
+        </TreeItem>
+        <TreeItem id="design.product" textValue="Product">
+          <TreeItemContent>
+            <TreeItemChevron hasChildItems={false} />
+            <span>Product</span>
+          </TreeItemContent>
+        </TreeItem>
+        <TreeItem id="design.research" textValue="Research">
+          <TreeItemContent>
+            <TreeItemChevron hasChildItems={false} />
+            <span>Research</span>
+          </TreeItemContent>
+        </TreeItem>
+      </TreeItem>
+
+      <TreeItem id="operations" textValue="Operations" hasChildItems>
+        <TreeItemContent>
+          <TreeItemChevron />
+          <span>Operations</span>
+        </TreeItemContent>
+        <TreeItem id="operations.people" textValue="People">
+          <TreeItemContent>
+            <TreeItemChevron hasChildItems={false} />
+            <span>People</span>
+          </TreeItemContent>
+        </TreeItem>
+        <TreeItem id="operations.finance" textValue="Finance">
+          <TreeItemContent>
+            <TreeItemChevron hasChildItems={false} />
+            <span>Finance</span>
+          </TreeItemContent>
+        </TreeItem>
+      </TreeItem>
+    </>
+  );
+}
+
+export const SingleSelection: Story = {
+  render: () => {
+    function Inner(): ReactElement {
+      const [selected, setSelected] = useState<Selection>(
+        new Set(['engineering.platform.ml']),
+      );
+      return (
+        <div className="flex flex-col gap-3">
+          <Tree
+            aria-label="Job categories"
+            selectionMode="single"
+            selectedKeys={selected}
+            defaultExpandedKeys={new Set(['engineering', 'engineering.platform'])}
+            onSelectionChange={setSelected}
+            className="max-w-md"
+          >
+            <LtreeSampleData />
+          </Tree>
+          <p className="text-sm text-[var(--muted-foreground)]">
+            Selected:{' '}
+            <code>{Array.from(selected as Set<string>).join(', ') || '—'}</code>
+          </p>
+        </div>
+      );
+    }
+    return <Inner />;
+  },
+};
+
+export const MultipleSelection: Story = {
+  render: () => {
+    function Inner(): ReactElement {
+      const [selected, setSelected] = useState<Selection>(
+        new Set(['engineering.platform.ml', 'design.research']),
+      );
+      return (
+        <div className="flex flex-col gap-3">
+          <Tree
+            aria-label="Job categories"
+            selectionMode="multiple"
+            selectedKeys={selected}
+            defaultExpandedKeys={
+              new Set(['engineering', 'engineering.platform', 'design'])
+            }
+            onSelectionChange={setSelected}
+            className="max-w-md"
+          >
+            <LtreeSampleData />
+          </Tree>
+          <p className="text-sm text-[var(--muted-foreground)]">
+            Selected:{' '}
+            <code>
+              {Array.from(selected as Set<string>).join(', ') || '—'}
+            </code>
+          </p>
+        </div>
+      );
+    }
+    return <Inner />;
+  },
+};
+
+export const SingleSelectionDeepLtree: Story = {
+  render: () => {
+    function Inner(): ReactElement {
+      const [selected, setSelected] = useState<Selection>(new Set([]));
+      return (
+        <div className="flex flex-col gap-3">
+          <Tree
+            aria-label="Job categories — deep"
+            selectionMode="single"
+            selectedKeys={selected}
+            defaultExpandedKeys={
+              new Set([
+                'engineering',
+                'engineering.platform',
+                'engineering.tooling',
+                'design',
+                'operations',
+              ])
+            }
+            onSelectionChange={setSelected}
+            className="max-w-md"
+          >
+            <LtreeSampleData />
+          </Tree>
+          <p className="text-sm text-[var(--muted-foreground)]">
+            Tip: use{' '}
+            <kbd className="rounded bg-[var(--secondary)] px-1.5 py-0.5">↓</kbd>{' '}
+            <kbd className="rounded bg-[var(--secondary)] px-1.5 py-0.5">↑</kbd>{' '}
+            to walk rows,{' '}
+            <kbd className="rounded bg-[var(--secondary)] px-1.5 py-0.5">→</kbd>{' '}
+            <kbd className="rounded bg-[var(--secondary)] px-1.5 py-0.5">←</kbd>{' '}
+            to expand/collapse, type-ahead to jump.
+          </p>
+        </div>
+      );
+    }
+    return <Inner />;
+  },
+};
+
+export const MultipleSelectionDeepLtree: Story = {
+  render: () => {
+    function Inner(): ReactElement {
+      const [selected, setSelected] = useState<Selection>(
+        new Set([
+          'engineering.platform.observability',
+          'engineering.tooling.ci',
+          'design.brand',
+          'operations.finance',
+        ]),
+      );
+      return (
+        <div className="flex flex-col gap-3">
+          <Tree
+            aria-label="Job categories — multi-pick"
+            selectionMode="multiple"
+            selectedKeys={selected}
+            defaultExpandedKeys={
+              new Set([
+                'engineering',
+                'engineering.platform',
+                'engineering.tooling',
+                'design',
+                'operations',
+              ])
+            }
+            onSelectionChange={setSelected}
+            className="max-w-md"
+          >
+            <LtreeSampleData />
+          </Tree>
+          <p className="text-sm text-[var(--muted-foreground)]">
+            {Array.from(selected as Set<string>).length} selected
+          </p>
+        </div>
+      );
+    }
+    return <Inner />;
+  },
+};
+
+export const DisabledRow: Story = {
+  render: () => (
+    <Tree aria-label="Departments" disabledKeys={['eng']} className="max-w-md">
+      <TreeItem id="eng" textValue="Engineering">
+        <TreeItemContent>
+          <TreeItemChevron hasChildItems={false} />
+          <span>Engineering (disabled)</span>
+        </TreeItemContent>
+      </TreeItem>
+      <TreeItem id="design" textValue="Design">
+        <TreeItemContent>
+          <TreeItemChevron hasChildItems={false} />
+          <span>Design</span>
+        </TreeItemContent>
+      </TreeItem>
+    </Tree>
+  ),
+};
+
+export const EmptyState: Story = {
+  render: () => (
+    <Tree
+      aria-label="Empty"
+      renderEmptyState={() => <span>No items yet</span>}
+      className="max-w-md"
+    >
+      {[]}
+    </Tree>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-6">
+      <Tree aria-label="sm" size="sm" className="max-w-md">
+        <TreeItem id="sm.1" textValue="Small row">
+          <TreeItemContent>
+            <TreeItemChevron hasChildItems={false} />
+            <span>Small row</span>
+          </TreeItemContent>
+        </TreeItem>
+      </Tree>
+      <Tree aria-label="default" className="max-w-md">
+        <TreeItem id="def.1" textValue="Default row">
+          <TreeItemContent>
+            <TreeItemChevron hasChildItems={false} />
+            <span>Default row</span>
+          </TreeItemContent>
+        </TreeItem>
+      </Tree>
+      <Tree aria-label="lg" size="lg" className="max-w-md">
+        <TreeItem id="lg.1" textValue="Large row">
+          <TreeItemContent>
+            <TreeItemChevron hasChildItems={false} />
+            <span>Large row</span>
+          </TreeItemContent>
+        </TreeItem>
+      </Tree>
+    </div>
+  ),
+};