@tribepad/themis 1.5.9 → 1.6.0

package/dist/styles/defaults.css

@@ -42,6 +42,11 @@
   --accent-foreground: #1f2937;
   --accent-background: #f3f4f6;
 
+  /* Selection tint — selected table rows + the bulk-action toolbar band.
+     A light brand-purple lilac on light surfaces; dark/high-contrast themes
+     darken instead of lighten (see their blocks below). */
+  --selected: #f3eefe;
+
   /* Muted Colors */
   --muted: #f9fafb;
   --muted-foreground: #6b7280;
@@ -150,6 +155,9 @@
   --accent-foreground: #f9fafb;
   --accent-background: #1a1a1a;
 
+  /* Selection tint — darker, elevated violet on the dark surface (not lighter). */
+  --selected: #2a2140;
+
   --muted: #1f2937;
   --muted-foreground: #9ca3af;
 
@@ -240,6 +248,10 @@
   --accent-foreground: #ffffff;
   --accent-background: #333333;
 
+  /* Selection tint — a clearly distinct dark surface on the black background
+     (high-contrast conveys selection via the checkbox/focus ring too). */
+  --selected: #333333;
+
   /* Muted */
   --muted: #1a1a1a;
   --muted-foreground: #cccccc;
@@ -318,6 +330,9 @@
   --primary: #1e40af;
   --primary-foreground: #ffffff;
 
+  /* Selection tint — light blue tint of the colorblind-safe primary. */
+  --selected: #e8eefb;
+
   /* Destructive — Orange instead of red (7.52:1 on white) */
   --destructive-background: #9a3412;
   --destructive-foreground: #ffffff;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tribepad/themis",
-  "version": "1.5.9",
+  "version": "1.6.0",
   "description": "Accessible React component library built on React Aria primitives",
   "author": "Tribepad <mbasford@tribepad.com>",
   "license": "MIT",
@@ -263,6 +263,11 @@
       "name": "ChatInterface only",
       "path": "dist/elements/ChatInterface/index.mjs",
       "limit": "28 KB"
+    },
+    {
+      "name": "Filters (full barrel)",
+      "path": "dist/elements/Filters/index.mjs",
+      "limit": "80 KB"
     }
   ],
   "keywords": [

package/src/elements/Filters/Filters.stories.tsx

@@ -0,0 +1,148 @@
+/**
+ * Filters — Storybook stories (compositional API)
+ *
+ * `<Filters values onChange labels>` owns one values map; controls are composed
+ * as children (`<FilterSearch>`, `<FilterSelect>`, `<FilterCombobox>` …) and
+ * `<FilterChips>` renders removable chips. Import only the controls you use.
+ */
+
+import { useState, type ReactElement } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import {
+  Filters,
+  FilterSearch,
+  FilterSelect,
+  FilterMulti,
+  FilterToggle,
+  FilterWithin,
+  FilterCombobox,
+  FilterChips,
+} from './Filters';
+import type { FilterOption, FilterValues } from './Filters.types';
+
+const statusOptions: FilterOption[] = [
+  { value: 'open', label: 'Open' },
+  { value: 'draft', label: 'Draft' },
+  { value: 'closed', label: 'Closed' },
+];
+const teamOptions: FilterOption[] = [
+  { value: 'eng', label: 'Engineering' },
+  { value: 'design', label: 'Design' },
+  { value: 'ops', label: 'Operations' },
+];
+const postedPresets: FilterOption[] = [
+  { value: 'any', label: 'Any time' },
+  { value: '24h', label: 'Last 24 hours' },
+  { value: '7d', label: 'Last 7 days' },
+  { value: '30d', label: 'Last 30 days' },
+];
+
+const meta = {
+  title: 'Elements/Filters',
+  component: Filters,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'A compositional filter bar. `<Filters values onChange labels>` owns one controlled values map; controls are composed as children and `<FilterChips>` renders removable chips. Domain-free (labels-as-props), non-modal popovers, WCAG 2.2 AAA.',
+      },
+    },
+  },
+} satisfies Meta<typeof Filters>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** A full bar with every control kind plus removable chips. */
+export const Default: Story = {
+  render: function FiltersStory(): ReactElement {
+    const [values, setValues] = useState<FilterValues>({ status: 'open', team: ['eng'] });
+    return (
+      <Filters
+        values={values}
+        onChange={setValues}
+        labels={{ done: 'Done', clear: 'Clear' }}
+        aria-label="Filter positions"
+      >
+        <FilterSearch name="q" label="Search positions" placeholder="Search name or title…" />
+        <FilterSelect name="status" label="Status" options={statusOptions} />
+        <FilterMulti name="team" label="Team" options={teamOptions} />
+        <FilterWithin name="posted" label="Posted" presets={postedPresets} />
+        <FilterToggle name="remote" label="Remote only" />
+        <FilterChips clearAllLabel="Clear all" removeChipLabel={(label) => `Remove ${label}`} />
+      </Filters>
+    );
+  },
+};
+
+/**
+ * API-backed type-ahead with `FilterCombobox` — the consumer fetches options in
+ * response to `onSearch` (debounce in real apps); the selected label persists in
+ * the chip even as the option list changes.
+ */
+export const AsyncCombobox: Story = {
+  render: function AsyncStory(): ReactElement {
+    const [values, setValues] = useState<FilterValues>({});
+    const [options, setOptions] = useState<FilterOption[]>([]);
+    const directory: FilterOption[] = [
+      { value: 'u1', label: 'Ada Lovelace' },
+      { value: 'u2', label: 'Alan Turing' },
+      { value: 'u3', label: 'Grace Hopper' },
+    ];
+    return (
+      <Filters values={values} onChange={setValues} labels={{ done: 'Done', clear: 'Clear' }}>
+        <FilterCombobox
+          name="assignee"
+          label="Assignee"
+          placeholder="Search people…"
+          options={options}
+          onSearch={(query) =>
+            setOptions(
+              query
+                ? directory.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()))
+                : []
+            )
+          }
+        />
+        <FilterChips clearAllLabel="Clear all" removeChipLabel={(label) => `Remove ${label}`} />
+      </Filters>
+    );
+  },
+};
+
+/**
+ * Mobile (narrow) — the bar collapses to a "Filters" button that opens a
+ * bottom-sheet of stacked controls; chips scroll horizontally. Pass `narrow`
+ * (measure once with `useContainerNarrow` and share it with your table switch).
+ */
+export const Mobile: Story = {
+  render: function MobileStory(): ReactElement {
+    const [values, setValues] = useState<FilterValues>({ status: 'open', team: ['eng'] });
+    return (
+      <div style={{ maxWidth: 380 }}>
+        <Filters
+          values={values}
+          onChange={setValues}
+          narrow
+          aria-label="Filter positions"
+          labels={{
+            done: 'Done',
+            clear: 'Clear',
+            clearAll: 'Clear all',
+            close: 'Close',
+            filtersButton: 'Filters',
+          }}
+        >
+          <FilterSearch name="q" label="Search positions" placeholder="Search…" />
+          <FilterSelect name="status" label="Status" options={statusOptions} />
+          <FilterMulti name="team" label="Team" options={teamOptions} />
+          <FilterWithin name="posted" label="Posted" presets={postedPresets} />
+          <FilterToggle name="remote" label="Remote only" />
+          <FilterChips clearAllLabel="Clear all" removeChipLabel={(label) => `Remove ${label}`} />
+        </Filters>
+      </div>
+    );
+  },
+};