@tribepad/themis 1.5.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.5.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
 // ============================================================================