@tribepad/themis 1.9.4 → 1.10.0

package/dist/styles/animations.css

@@ -312,3 +312,18 @@
   animation: selection-pulse 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
+/* =============================================================================
+ * Feature Icon Float
+ * Subtle, continuous vertical drift for FeatureIcon's `animated` variant.
+ * Pair with `motion-reduce:animate-none` to honour prefers-reduced-motion.
+ * ============================================================================= */
+
+@keyframes feature-icon-float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-2px); }
+}
+
+@utility feature-icon-animated {
+  animation: feature-icon-float 2.6s ease-in-out infinite;
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tribepad/themis",
-  "version": "1.9.4",
+  "version": "1.10.0",
   "description": "Accessible React component library built on React Aria primitives",
   "author": "Tribepad <mbasford@tribepad.com>",
   "license": "MIT",
@@ -163,35 +163,35 @@
     "@storybook/addon-a11y": "^10.4.4",
     "@storybook/addon-mcp": "^0.6.0",
     "@storybook/react-vite": "^10.4.4",
-    "@tailwindcss/vite": "^4.3.0",
+    "@tailwindcss/vite": "^4.3.2",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^25.9.3",
+    "@types/node": "^26.1.0",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.61.0",
-    "@typescript-eslint/parser": "^8.61.0",
+    "@typescript-eslint/eslint-plugin": "^8.62.1",
+    "@typescript-eslint/parser": "^8.62.1",
     "@vitejs/plugin-react": "^6.0.2",
-    "@vitest/coverage-v8": "^4.1.8",
-    "eslint": "^10.4.1",
+    "@vitest/coverage-v8": "^4.1.10",
+    "eslint": "^10.6.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-storybook": "10.4.4",
     "globals": "^17.6.0",
     "happy-dom": "^20.10.2",
     "jest-axe": "^10.0.0",
     "jsdom": "^29.1.1",
-    "lucide-react": "^1.18.0",
-    "motion": "^12.40.0",
+    "lucide-react": "^1.23.0",
+    "motion": "^12.42.2",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "size-limit": "^12.1.0",
     "storybook": "^10.4.4",
     "tsup": "^8.5.1",
-    "tsx": "^4.22.4",
-    "typescript": "^5.9.3",
-    "vite": "^8.0.16",
-    "vitest": "^4.1.8",
+    "tsx": "^4.23.0",
+    "typescript": "^6.0.3",
+    "vite": "^8.1.3",
+    "vitest": "^4.1.10",
     "zod": "^4.4.3"
   },
   "pnpm": {
@@ -199,7 +199,9 @@
       "esbuild"
     ],
     "overrides": {
-      "postcss@<8.5.10": "^8.5.12"
+      "postcss@<8.5.10": "^8.5.12",
+      "undici@>=7.0.0 <7.28.0": "^7.28.0",
+      "@babel/core@<=7.29.0": "^7.29.6"
     }
   },
   "engines": {

package/src/elements/FeatureIcon/FeatureIcon.stories.tsx

@@ -0,0 +1,164 @@
+/**
+ * FeatureIcon Component — Storybook Stories
+ *
+ * Display-only icon in a styled rounded container. These stories showcase the
+ * size, background, corner, icon-source, animation, and tooltip variations.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, userEvent, within } from 'storybook/test';
+import { FeatureIcon } from './FeatureIcon';
+import type {
+  FeatureIconBackground,
+  FeatureIconCorners,
+  FeatureIconSection,
+  FeatureIconSize,
+} from './FeatureIcon.types';
+
+const SIZES: FeatureIconSize[] = ['sm', 'default', 'lg', 'xl'];
+const BACKGROUNDS: FeatureIconBackground[] = [
+  'transparent',
+  'primary',
+  'pale',
+  'dark',
+  'status',
+  'sidekick',
+];
+const CORNERS: FeatureIconCorners[] = ['square', 'rounded', 'full'];
+const SECTIONS: FeatureIconSection[] = [
+  'jobs',
+  'candidates',
+  'interviews',
+  'messages',
+  'reports',
+  'tasks',
+  'settings',
+  'notifications',
+];
+
+const meta = {
+  title: 'Elements/FeatureIcon',
+  component: FeatureIcon,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'A display-only icon inside a styled, rounded container. Non-interactive by design — it represents a feature, product section, or status.\n\n**Key features:**\n- Sizes: sm, default, lg, xl\n- Backgrounds: transparent, primary, pale, dark, status, sidekick (AI gradient)\n- Corners: square, rounded, full\n- Icon: the design-specified default icon per section\n- Optional subtle animation on the icon (honours `prefers-reduced-motion`)\n- Optional tooltip — makes the icon keyboard-focusable and AT-named (WCAG 1.4.13 hoverable/dismissible)',
+      },
+    },
+  },
+  argTypes: {
+    size: { control: 'select', options: SIZES, description: 'Container / icon size' },
+    background: { control: 'select', options: BACKGROUNDS, description: 'Background treatment' },
+    corners: { control: 'select', options: CORNERS, description: 'Corner radius' },
+    tooltip: { control: 'text', description: 'Tooltip text (also names the icon for AT)' },
+    tooltipSide: {
+      control: 'select',
+      options: ['top', 'bottom', 'left', 'right'],
+      description: 'Tooltip placement',
+    },
+    // --- Icon ---
+    section: {
+      control: 'select',
+      options: SECTIONS,
+      description: 'Default icon, specified in the design (per section guidelines).',
+      table: { category: 'Icon' },
+    },
+    animated: {
+      control: 'boolean',
+      description: 'Subtle idle animation, applied to the icon.',
+      table: { category: 'Icon' },
+    },
+  },
+  args: {
+    size: 'default',
+    background: 'pale',
+    corners: 'rounded',
+    section: 'jobs',
+    animated: false,
+  },
+} satisfies Meta<typeof FeatureIcon>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Playground — drive every prop from the controls panel. */
+export const Default: Story = {};
+
+/** All sizes, side by side. */
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-end gap-6">
+      {SIZES.map((size) => (
+        <div key={size} className="flex flex-col items-center gap-2">
+          <FeatureIcon size={size} section="jobs" />
+          <span className="text-xs text-[var(--menu-muted)]">{size}</span>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+/** Every background treatment. */
+export const Backgrounds: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-end gap-6">
+      {BACKGROUNDS.map((background) => (
+        <div key={background} className="flex flex-col items-center gap-2">
+          <FeatureIcon background={background} section="candidates" size="lg" />
+          <span className="text-xs text-[var(--menu-muted)]">{background}</span>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+/** Corner radius options. */
+export const Corners: Story = {
+  render: () => (
+    <div className="flex items-end gap-6">
+      {CORNERS.map((corners) => (
+        <div key={corners} className="flex flex-col items-center gap-2">
+          <FeatureIcon corners={corners} section="interviews" size="lg" />
+          <span className="text-xs text-[var(--menu-muted)]">{corners}</span>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+/** Subtle idle animation (disabled automatically under prefers-reduced-motion). */
+export const Animated: Story = {
+  args: {
+    animated: true,
+    background: 'sidekick',
+    section: 'notifications',
+    size: 'xl',
+  },
+};
+
+/**
+ * With a tooltip the icon becomes keyboard-focusable and exposes role="img"
+ * with an accessible name. The play function focuses it and asserts the
+ * tooltip appears.
+ */
+export const WithTooltip: Story = {
+  args: {
+    tooltip: 'View interviews',
+    background: 'sidekick',
+    section: 'interviews',
+    size: 'lg',
+  },
+  play: async ({ canvas }) => {
+    const icon = canvas.getByRole('img', { name: 'View interviews' });
+    await userEvent.tab();
+    await expect(icon).toHaveFocus();
+
+    // Tooltip renders in a portal on document.body.
+    const body = within(document.body);
+    const tip = await body.findByRole('tooltip');
+    await expect(tip).toHaveTextContent('Ask Sidekick AI');
+  },
+};