torch-glare 2.2.0 → 2.3.0

package/apps/lib/components/BadgeField.tsx

@@ -52,6 +52,7 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
       addLabel = "add",
       dir,
       children,
+      onValueChange,
       ...props
     },
     forwardedRef
@@ -85,11 +86,17 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
       searchTags
     } = useTagSelection({
       Tags: tags,
-      onTagsChange: (e) => props.onChange?.({
-        target: {
-          value: e
-        }
-      } as any),
+      onTagsChange: (e) => {
+        // Native onChange keeps the event-shaped API (Tag[] in target.value)
+        // for react-hook-form / Controller; onValueChange is the typed, direct
+        // callback consumers and the docs use.
+        props.onChange?.({
+          target: {
+            value: e
+          }
+        } as any);
+        onValueChange?.(e);
+      },
       inputRef
     });
 

package/apps/lib/components/DataViews/DataViewsHeader.tsx

@@ -4,6 +4,7 @@ import { Search, Settings } from "lucide-react";
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import type { ViewType } from "./types";
 import { Button } from "../Button";
+import { TabSwitch } from "../TabSwitch";
 import { cn } from "../../utils/cn";
 
 export type DataViewsHeaderView = {
@@ -66,38 +67,18 @@ export function DataViewsHeader({
 
       {/* Segmented view switcher */}
       <div className="flex flex-1 items-center gap-2">
-        <div className="flex items-center gap-[2px] rounded-[10px] bg-[#252729] p-[2px] shadow-[inset_0_0_4px_0_rgba(0,0,0,0.08)]">
-          {views.map((view, idx) => {
-            const active = view.id === currentView;
-            const prevActive = idx > 0 && views[idx - 1].id === currentView;
-            // Separator sits between two inactive tabs only; the active white
-            // pill never has a flanking divider (matches Figma).
-            const showDivider = idx > 0 && !active && !prevActive;
-            return (
-              <div key={view.id} className="flex items-center">
-                {showDivider && (
-                  <div className="mx-[3px] h-3 w-px bg-[#434446]" />
-                )}
-                <button
-                  type="button"
-                  aria-pressed={active}
-                  onClick={() => onViewChange(view.id)}
-                  className={cn(
-                    "flex h-6 items-center gap-[6px] rounded-[8px] px-3 text-[14px] font-[510] leading-none transition-all duration-200 ease-in-out",
-                    active
-                      ? "bg-white text-black shadow-[0_0_10px_2px_rgba(0,0,0,0.25)]"
-                      : "bg-transparent text-white hover:bg-white/5",
-                  )}
-                >
-                  <span className="flex h-[14px] w-[14px] items-center justify-center [&_svg]:h-[14px] [&_svg]:w-[14px]">
-                    {view.icon}
-                  </span>
-                  {view.label}
-                </button>
-              </div>
-            );
-          })}
-        </div>
+        <TabSwitch
+          // The header bar is always dark, so the switcher resolves dark-theme
+          // tokens regardless of the host app's theme.
+          theme="dark"
+          value={currentView}
+          onValueChange={onViewChange}
+          options={views.map((view) => ({
+            value: view.id,
+            label: view.label,
+            icon: view.icon,
+          }))}
+        />
       </div>
 
       {/* Action bar */}

package/apps/lib/components/TabSwitch.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+import { forwardRef, type ReactNode } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../utils/cn";
+import { Themes } from "../utils/types";
+
+/**
+ * TabSwitch — a segmented control for picking one option from a small set.
+ *
+ * The classic "List / Cards"-style pill switcher: a rounded track holding one
+ * button per option, with the active option rendered as a raised pill. Thin
+ * dividers sit between adjacent inactive options (never flanking the active
+ * pill). Generic over the option value, controlled via `value`/`onValueChange`,
+ * theme-aware, and built on semantic presentation tokens so it adapts to
+ * light/dark/default themes.
+ */
+
+export interface TabSwitchOption<T extends string = string> {
+  value: T;
+  label?: ReactNode;
+  /** Optional leading icon (Remix `<i>`, lucide svg, etc.). */
+  icon?: ReactNode;
+  disabled?: boolean;
+}
+
+// The track (outer container) holds the segmented buttons.
+const trackStyles = cva(
+  [
+    "inline-flex items-center w-fit",
+    "rounded-[10px]",
+    "bg-background-presentation-body-primary",
+    "shadow-[inset_0_0_4px_0_rgba(0,0,0,0.08)]",
+  ],
+  {
+    variants: {
+      size: {
+        S: ["gap-[2px] p-[2px]"],
+        M: ["gap-[2px] p-[2px]"],
+        L: ["gap-[3px] p-[3px]"],
+      },
+    },
+    defaultVariants: { size: "M" },
+  },
+);
+
+// Each option button. The active pill is raised; inactive options are
+// transparent and lighten on hover.
+const optionStyles = cva(
+  [
+    "flex items-center justify-center gap-[6px]",
+    "rounded-[8px]",
+    "font-[510] leading-none",
+    "transition-all duration-200 ease-in-out",
+    "outline-none",
+    "focus-visible:ring-2 focus-visible:ring-border-presentation-state-focus",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+  ],
+  {
+    variants: {
+      size: {
+        S: [
+          "h-5 px-2 text-[12px]",
+          "[&_svg]:h-3 [&_svg]:w-3",
+          "[&_i]:text-[12px]",
+        ],
+        M: [
+          "h-6 px-3 text-[14px]",
+          "[&_svg]:h-[14px] [&_svg]:w-[14px]",
+          "[&_i]:text-[14px]",
+        ],
+        L: [
+          "h-8 px-4 text-[16px]",
+          "[&_svg]:h-4 [&_svg]:w-4",
+          "[&_i]:text-[16px]",
+        ],
+      },
+      active: {
+        // Active option = a solid raised WHITE pill with dark text, in every
+        // theme. The selected-tab design tokens encode a different look per
+        // theme (black pill on light, translucent-white on dark), but the
+        // intended switcher is always a white pill — and it must stay visible
+        // on the always-dark DataViews header bar — so the active pill is
+        // theme-independent here. The track + inactive options remain
+        // theme-aware.
+        true: [
+          "bg-white",
+          "text-[#1C1D1F]",
+          "border border-black/5",
+          "shadow-[0_1px_3px_0_rgba(0,0,0,0.18)]",
+        ],
+        false: [
+          "border border-transparent",
+          "bg-transparent",
+          "text-content-presentation-global-primary",
+          "hover:bg-background-presentation-tab-hover",
+        ],
+      },
+    },
+    defaultVariants: { size: "M", active: false },
+  },
+);
+
+interface Props<T extends string = string>
+  extends
+    Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">,
+    VariantProps<typeof trackStyles> {
+  options: TabSwitchOption<T>[];
+  /** Controlled selected value. */
+  value: T;
+  onValueChange: (value: T) => void;
+  theme?: Themes;
+  disabled?: boolean;
+}
+
+function TabSwitchInner<T extends string = string>(
+  {
+    options,
+    value,
+    onValueChange,
+    size,
+    theme,
+    disabled,
+    className,
+    ...props
+  }: Props<T>,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  return (
+    <div
+      ref={ref}
+      role="tablist"
+      data-theme={theme}
+      className={cn(trackStyles({ size }), className)}
+      {...props}
+    >
+      {options.map((option, idx) => {
+        const active = option.value === value;
+        const prevActive = idx > 0 && options[idx - 1].value === value;
+        // A divider sits between two inactive options only — the active pill is
+        // never flanked by one.
+        const showDivider = idx > 0 && !active && !prevActive;
+        const isDisabled = disabled || option.disabled;
+
+        return (
+          <div key={option.value} className="flex items-center">
+            {showDivider && (
+              <div className="mx-[3px] h-3 w-px bg-border-presentation-action-disabled" />
+            )}
+            <button
+              type="button"
+              role="tab"
+              aria-selected={active}
+              aria-pressed={active}
+              disabled={isDisabled}
+              onClick={() => onValueChange(option.value)}
+              className={cn(optionStyles({ size, active }))}
+            >
+              {option.icon && (
+                <span className="flex items-center justify-center">
+                  {option.icon}
+                </span>
+              )}
+              {option.label}
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// forwardRef loses the generic, so we cast to preserve `<TabSwitch<T> />` typing.
+export const TabSwitch = forwardRef(TabSwitchInner) as <
+  T extends string = string,
+>(
+  props: Props<T> & { ref?: React.ForwardedRef<HTMLDivElement> },
+) => ReturnType<typeof TabSwitchInner>;
+
+// @ts-expect-error — attach displayName to the cast function for devtools.
+TabSwitch.displayName = "TabSwitch";

package/docs/components/badge-field.md

@@ -33,9 +33,9 @@ import { useState } from 'react'
 
 export function BasicBadgeField() {
   const [tags] = useState([
-    { id: '1', name: 'React', variant: 'blue' },
-    { id: '2', name: 'TypeScript', variant: 'purple' },
-    { id: '3', name: 'Next.js', variant: 'slate' },
+    { id: '1', name: 'React', isSelected: false, variant: 'blue' },
+    { id: '2', name: 'TypeScript', isSelected: false, variant: 'purple' },
+    { id: '3', name: 'Next.js', isSelected: false, variant: 'slate' },
   ])
 
   return (
@@ -59,16 +59,16 @@ export function TechnologySelector() {
   const [selectedTags, setSelectedTags] = useState<Tag[]>([])
 
   const allTags: Tag[] = [
-    { id: '1', name: 'React', variant: 'blue' },
-    { id: '2', name: 'TypeScript', variant: 'purple' },
-    { id: '3', name: 'Next.js', variant: 'slate' },
-    { id: '4', name: 'Tailwind CSS', variant: 'green' },
-    { id: '5', name: 'Node.js', variant: 'green' },
-    { id: '6', name: 'PostgreSQL', variant: 'blue' },
-    { id: '7', name: 'MongoDB', variant: 'green' },
-    { id: '8', name: 'GraphQL', variant: 'purple' },
-    { id: '9', name: 'REST API', variant: 'gray' },
-    { id: '10', name: 'Docker', variant: 'blue' },
+    { id: '1', name: 'React', isSelected: false, variant: 'blue' },
+    { id: '2', name: 'TypeScript', isSelected: false, variant: 'purple' },
+    { id: '3', name: 'Next.js', isSelected: false, variant: 'slate' },
+    { id: '4', name: 'Tailwind CSS', isSelected: false, variant: 'green' },
+    { id: '5', name: 'Node.js', isSelected: false, variant: 'green' },
+    { id: '6', name: 'PostgreSQL', isSelected: false, variant: 'blue' },
+    { id: '7', name: 'MongoDB', isSelected: false, variant: 'green' },
+    { id: '8', name: 'GraphQL', isSelected: false, variant: 'purple' },
+    { id: '9', name: 'REST API', isSelected: false, variant: 'gray' },
+    { id: '10', name: 'Docker', isSelected: false, variant: 'blue' },
   ]
 
   return (
@@ -101,13 +101,13 @@ Filter content by multiple categories.
 ```tsx
 export function CategoryFilter() {
   const categories: Tag[] = [
-    { id: 'design', name: 'Design', variant: 'purple' },
-    { id: 'development', name: 'Development', variant: 'blue' },
-    { id: 'marketing', name: 'Marketing', variant: 'yellow' },
-    { id: 'sales', name: 'Sales', variant: 'green' },
-    { id: 'support', name: 'Support', variant: 'orange' },
-    { id: 'hr', name: 'Human Resources', variant: 'rose' },
-    { id: 'finance', name: 'Finance', variant: 'slate' },
+    { id: 'design', name: 'Design', isSelected: false, variant: 'purple' },
+    { id: 'development', name: 'Development', isSelected: false, variant: 'blue' },
+    { id: 'marketing', name: 'Marketing', isSelected: false, variant: 'yellow' },
+    { id: 'sales', name: 'Sales', isSelected: false, variant: 'green' },
+    { id: 'support', name: 'Support', isSelected: false, variant: 'orange' },
+    { id: 'hr', name: 'Human Resources', isSelected: false, variant: 'rose' },
+    { id: 'finance', name: 'Finance', isSelected: false, variant: 'slate' },
   ]
 
   const [selectedCategories, setSelectedCategories] = useState<Tag[]>([])
@@ -148,21 +148,21 @@ Multi-select skills for job applications or profiles.
 ```tsx
 export function SkillsSelector() {
   const skills: Tag[] = [
-    { id: 'js', name: 'JavaScript', variant: 'yellow' },
-    { id: 'ts', name: 'TypeScript', variant: 'blue' },
-    { id: 'react', name: 'React', variant: 'blue' },
-    { id: 'vue', name: 'Vue.js', variant: 'green' },
-    { id: 'angular', name: 'Angular', variant: 'red' },
-    { id: 'node', name: 'Node.js', variant: 'green' },
-    { id: 'python', name: 'Python', variant: 'blue' },
-    { id: 'java', name: 'Java', variant: 'orange' },
-    { id: 'go', name: 'Go', variant: 'green' },
-    { id: 'rust', name: 'Rust', variant: 'orange' },
-    { id: 'sql', name: 'SQL', variant: 'slate' },
-    { id: 'nosql', name: 'NoSQL', variant: 'green' },
-    { id: 'aws', name: 'AWS', variant: 'yellow' },
-    { id: 'azure', name: 'Azure', variant: 'blue' },
-    { id: 'gcp', name: 'Google Cloud', variant: 'blue' },
+    { id: 'js', name: 'JavaScript', isSelected: false, variant: 'yellow' },
+    { id: 'ts', name: 'TypeScript', isSelected: false, variant: 'blue' },
+    { id: 'react', name: 'React', isSelected: false, variant: 'blue' },
+    { id: 'vue', name: 'Vue.js', isSelected: false, variant: 'green' },
+    { id: 'angular', name: 'Angular', isSelected: false, variant: 'red' },
+    { id: 'node', name: 'Node.js', isSelected: false, variant: 'green' },
+    { id: 'python', name: 'Python', isSelected: false, variant: 'blue' },
+    { id: 'java', name: 'Java', isSelected: false, variant: 'orange' },
+    { id: 'go', name: 'Go', isSelected: false, variant: 'green' },
+    { id: 'rust', name: 'Rust', isSelected: false, variant: 'orange' },
+    { id: 'sql', name: 'SQL', isSelected: false, variant: 'slate' },
+    { id: 'nosql', name: 'NoSQL', isSelected: false, variant: 'green' },
+    { id: 'aws', name: 'AWS', isSelected: false, variant: 'yellow' },
+    { id: 'azure', name: 'Azure', isSelected: false, variant: 'blue' },
+    { id: 'gcp', name: 'Google Cloud', isSelected: false, variant: 'blue' },
   ]
 
   const [selectedSkills, setSelectedSkills] = useState<Tag[]>([])
@@ -213,16 +213,16 @@ Tag management for projects with custom variants.
 ```tsx
 export function ProjectTags() {
   const projectTags: Tag[] = [
-    { id: '1', name: 'High Priority', variant: 'red' },
-    { id: '2', name: 'In Progress', variant: 'blue' },
-    { id: '3', name: 'Completed', variant: 'green' },
-    { id: '4', name: 'On Hold', variant: 'yellow' },
-    { id: '5', name: 'Needs Review', variant: 'purple' },
-    { id: '6', name: 'Client Approval', variant: 'purple' },
-    { id: '7', name: 'Internal', variant: 'gray' },
-    { id: '8', name: 'External', variant: 'slate' },
-    { id: '9', name: 'Urgent', variant: 'orange' },
-    { id: '10', name: 'Can Wait', variant: 'green' },
+    { id: '1', name: 'High Priority', isSelected: false, variant: 'red' },
+    { id: '2', name: 'In Progress', isSelected: false, variant: 'blue' },
+    { id: '3', name: 'Completed', isSelected: false, variant: 'green' },
+    { id: '4', name: 'On Hold', isSelected: false, variant: 'yellow' },
+    { id: '5', name: 'Needs Review', isSelected: false, variant: 'purple' },
+    { id: '6', name: 'Client Approval', isSelected: false, variant: 'purple' },
+    { id: '7', name: 'Internal', isSelected: false, variant: 'gray' },
+    { id: '8', name: 'External', isSelected: false, variant: 'slate' },
+    { id: '9', name: 'Urgent', isSelected: false, variant: 'orange' },
+    { id: '10', name: 'Can Wait', isSelected: false, variant: 'green' },
   ]
 
   const [projectData, setProjectData] = useState({
@@ -275,9 +275,9 @@ BadgeField in various sizes.
 ```tsx
 export function BadgeFieldSizes() {
   const tags: Tag[] = [
-    { id: '1', name: 'Small', variant: 'blue' },
-    { id: '2', name: 'Medium', variant: 'green' },
-    { id: '3', name: 'Large', variant: 'purple' },
+    { id: '1', name: 'Small', isSelected: false, variant: 'blue' },
+    { id: '2', name: 'Medium', isSelected: false, variant: 'green' },
+    { id: '3', name: 'Large', isSelected: false, variant: 'purple' },
   ]
 
   return (
@@ -308,9 +308,9 @@ Badge field with custom icons and action buttons.
 ```tsx
 export function BadgeFieldWithIcon() {
   const tags: Tag[] = [
-    { id: '1', name: 'JavaScript', variant: 'yellow' },
-    { id: '2', name: 'Python', variant: 'blue' },
-    { id: '3', name: 'Ruby', variant: 'red' },
+    { id: '1', name: 'JavaScript', isSelected: false, variant: 'yellow' },
+    { id: '2', name: 'Python', isSelected: false, variant: 'blue' },
+    { id: '3', name: 'Ruby', isSelected: false, variant: 'red' },
   ]
 
   return (
@@ -339,9 +339,9 @@ export function BadgeFieldWithError() {
   const [error, setError] = useState('')
 
   const availableTags: Tag[] = [
-    { id: '1', name: 'Option 1', variant: 'blue' },
-    { id: '2', name: 'Option 2', variant: 'green' },
-    { id: '3', name: 'Option 3', variant: 'purple' },
+    { id: '1', name: 'Option 1', isSelected: false, variant: 'blue' },
+    { id: '2', name: 'Option 2', isSelected: false, variant: 'green' },
+    { id: '3', name: 'Option 3', isSelected: false, variant: 'purple' },
   ]
 
   const handleChange = (newTags: Tag[]) => {
@@ -382,10 +382,10 @@ Tag-style email recipient selector.
 ```tsx
 export function EmailRecipients() {
   const contacts: Tag[] = [
-    { id: '1', name: 'john@example.com', variant: 'blue' },
-    { id: '2', name: 'jane@example.com', variant: 'green' },
-    { id: '3', name: 'team@example.com', variant: 'purple' },
-    { id: '4', name: 'support@example.com', variant: 'slate' },
+    { id: '1', name: 'john@example.com', isSelected: false, variant: 'blue' },
+    { id: '2', name: 'jane@example.com', isSelected: false, variant: 'green' },
+    { id: '3', name: 'team@example.com', isSelected: false, variant: 'purple' },
+    { id: '4', name: 'support@example.com', isSelected: false, variant: 'slate' },
   ]
 
   const [recipients, setRecipients] = useState<Tag[]>([])
@@ -422,37 +422,29 @@ export function EmailRecipients() {
 }
 ```
 
-### Variants
+### RTL Support
 
-System and Presentation style variants.
+Pass `dir="rtl"` (and a translated `addLabel`) to mirror the field for right-to-left languages.
 
 ```tsx
-export function BadgeFieldVariants() {
+export function RtlBadgeField() {
   const tags: Tag[] = [
-    { id: '1', name: 'Tag 1', variant: 'blue' },
-    { id: '2', name: 'Tag 2', variant: 'green' },
-    { id: '3', name: 'Tag 3', variant: 'purple' },
+    { id: '1', name: 'إلكترونيات', isSelected: false, variant: 'blue' },
+    { id: '2', name: 'كتب', isSelected: false, variant: 'green' },
+    { id: '3', name: 'ملابس', isSelected: false, variant: 'purple' },
   ]
 
-  return (
-    <div className="space-y-6">
-      <div>
-        <h3 className="font-semibold mb-2">System Style</h3>
-        <BadgeField
-          tags={tags}
-          variant="SystemStyle"
-          placeholder="System style variant..."
-        />
-      </div>
+  const [selected, setSelected] = useState<Tag[]>([])
 
-      <div>
-        <h3 className="font-semibold mb-2">Presentation Style</h3>
-        <BadgeField
-          tags={tags}
-          variant="PresentationStyle"
-          placeholder="Presentation style variant..."
-        />
-      </div>
+  return (
+    <div dir="rtl">
+      <BadgeField
+        dir="rtl"
+        tags={tags}
+        onValueChange={setSelected}
+        addLabel="إضافة"
+        placeholder="اختر وسماً"
+      />
     </div>
   )
 }
@@ -469,7 +461,7 @@ Extends all Input element props (except size and variant).
 | tags | `Tag[]` | **Required** | Available tags to select from |
 | onValueChange | `(tags: Tag[]) => void` | - | Callback when selection changes |
 | size | `'XS' \| 'S' \| 'M'` | `'M'` | Field size |
-| variant | `'SystemStyle' \| 'PresentationStyle'` | `'PresentationStyle'` | Visual variant |
+| variant | `'PresentationStyle'` | `'PresentationStyle'` | Visual variant |
 | icon | `ReactNode` | - | Leading icon |
 | errorMessage | `string` | - | Error message (shows tooltip) |
 | onTable | `boolean` | `false` | Table-specific styling |
@@ -478,6 +470,8 @@ Extends all Input element props (except size and variant).
 | required | `boolean` | `false` | Required indicator |
 | theme | `Themes` | - | Theme override |
 | actionButton | `ReactNode` | - | Trailing action button |
+| addLabel | `string` | `'add'` | Label for the add action shown in the field |
+| dir | `string` | `'ltr'` | Reading direction (`'rtl'` for right-to-left) |
 | placeholder | `string` | - | Input placeholder text |
 
 ### Tag Type
@@ -486,7 +480,10 @@ Extends all Input element props (except size and variant).
 interface Tag {
   id: string
   name: string
-  variant?: BadgeVariant
+  isSelected: boolean
+  variant?: string
+  value?: string
+  [key: string]: any
 }
 ```
 
@@ -500,8 +497,8 @@ BadgeField includes comprehensive keyboard support:
 | `ArrowUp` | Move focus to previous tag in dropdown |
 | `ArrowLeft` | Move focus to previous selected tag |
 | `ArrowRight` | Move focus to next selected tag |
-| `Enter` | Select focused tag / Remove focused selected tag |
-| `Backspace` | Remove last selected tag when input is empty |
+| `Enter` | Select the focused tag from the dropdown |
+| `Delete` / `Backspace` | Remove the focused selected tag |
 | `Escape` | Close dropdown |
 | `Tab` | Close dropdown and move to next field |
 
@@ -531,7 +528,7 @@ BadgeField includes comprehensive keyboard support:
 interface BadgeFieldProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'variant'> {
   size?: 'XS' | 'S' | 'M'
-  variant?: 'SystemStyle' | 'PresentationStyle'
+  variant?: 'PresentationStyle'
   icon?: ReactNode
   errorMessage?: string
   onTable?: boolean
@@ -542,12 +539,16 @@ interface BadgeFieldProps
   actionButton?: ReactNode
   tags: Tag[]
   onValueChange?: (tags: Tag[]) => void
+  addLabel?: string
 }
 
 interface Tag {
   id: string
   name: string
-  variant?: BadgeVariant
+  isSelected: boolean
+  variant?: string
+  value?: string
+  [key: string]: any
 }
 ```
 
@@ -596,8 +597,8 @@ import { BadgeField } from '@/components/BadgeField'
 
 describe('BadgeField', () => {
   const mockTags = [
-    { id: '1', name: 'Tag 1', variant: 'blue' },
-    { id: '2', name: 'Tag 2', variant: 'green' },
+    { id: '1', name: 'Tag 1', isSelected: false, variant: 'blue' },
+    { id: '2', name: 'Tag 2', isSelected: false, variant: 'green' },
   ]
 
   it('renders placeholder', () => {
@@ -638,7 +639,10 @@ describe('BadgeField', () => {
     fireEvent.focus(input)
     fireEvent.click(screen.getByText('Tag 1'))
 
-    expect(handleChange).toHaveBeenCalledWith([mockTags[0]])
+    // Selecting a tag emits it with isSelected: true
+    expect(handleChange).toHaveBeenCalledWith([
+      expect.objectContaining({ id: '1', isSelected: true }),
+    ])
   })
 
   it('removes tag on unselect', () => {

package/docs/components/context-menu.md

@@ -272,6 +272,7 @@ The right-click zone. Wrap it around the element the menu should open from.
 |------|------|---------|-------------|
 | `variant` | `'Default' \| 'info' \| 'Negative'` | `'Default'` | Item style variant |
 | `size` | `'S' \| 'M'` | `'M'` | Item size |
+| `inset` | `boolean` | `false` | Add left padding to align with items that have icons |
 | `active` | `boolean` | `false` | Active (selected) state |
 | `disabled` | `boolean` | `false` | Disabled state (still shows but is not selectable) |
 | `onSelect` | `(event: Event) => void` | - | Select handler; closes the menu by default |
@@ -311,6 +312,7 @@ The right-click zone. Wrap it around the element the menu should open from.
 |------|------|---------|-------------|
 | `variant` | `'Default' \| 'info' \| 'Negative'` | `'Default'` | Style variant |
 | `size` | `'S' \| 'M'` | `'M'` | Item size |
+| `inset` | `boolean` | `false` | Add left padding to align with items that have icons |
 | `className` | `string` | - | Additional CSS classes |
 
 Renders a trailing chevron (`ri-arrow-right-s-line`) that mirrors in RTL.
@@ -319,6 +321,7 @@ Renders a trailing chevron (`ri-arrow-right-s-line`) that mirrors in RTL.
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
+| `inset` | `boolean` | `false` | Add left padding to align with items that have icons |
 | `className` | `string` | - | Additional CSS classes |
 
 A non-interactive section heading. Acts as a boundary for auto-grouping.

package/docs/components/data-views-layout.md

@@ -268,7 +268,7 @@ function CustomScreen({ data, fields }: Props) {
 
 ## Accessibility
 
-- The view-switcher uses `TabFormItem` (button-based, full keyboard support via Tab/Enter/Space).
+- The view-switcher uses [`TabSwitch`](./tab-switch.md) — a segmented `role="tablist"` control (each view a `role="tab"` button, full keyboard support via Tab/Enter/Space). Installing DataViews pulls in `TabSwitch` automatically.
 - Tree rows expose `role="treeitem"` with `aria-expanded` and `aria-selected`.
 - Filter checkboxes carry labels and `htmlFor` linkage.
 - Settings panel buttons have `aria-pressed` for sort direction.
@@ -284,4 +284,5 @@ The component uses only `*-presentation-*` design tokens. Wrap with `ThemeProvid
 - [`KanbanView`](./kanban-view.md) — standalone kanban
 - [`InboxView`](./inbox-view.md) — standalone inbox
 - [`TreeView`](./tree-view.md) — standalone tree
+- [`TabSwitch`](./tab-switch.md) — the segmented view-switcher in the header (reusable on its own)
 - [How-to: Render a backend response with DataViews](../how-to/data-views-from-backend-response.md) — recipes by data shape.

package/docs/components/dropdown-menu.md

@@ -32,6 +32,7 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuSubContent,
   DropdownMenuGroup,
+  DropdownMenuPortal,
 } from '@torch-ui/components'
 ```
 
@@ -275,27 +276,6 @@ function DisabledMenu() {
 }
 ```
 
-### SystemStyle Variant
-
-```typescript
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@torch-ui/components'
-
-function SystemMenu() {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <button>System</button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent variant="SystemStyle">
-        <DropdownMenuItem variant="SystemStyle">Settings</DropdownMenuItem>
-        <DropdownMenuItem variant="SystemStyle">About</DropdownMenuItem>
-        <DropdownMenuItem variant="SystemStyle">Help</DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
-```
-
 ### Right-click Menu
 
 For a true right-click (context) menu, use the dedicated [ContextMenu](./context-menu.md) component instead of DropdownMenu — it opens at the pointer on right-click / long-press.
@@ -340,12 +320,12 @@ function Example() {
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `variant` | `'SystemStyle' \| 'PresentationStyle'` | `'PresentationStyle'` | Visual style variant |
+| `variant` | `'PresentationStyle'` | `'PresentationStyle'` | Visual style variant |
 | `theme` | `'dark' \| 'light' \| 'default'` | - | Theme variant |
 | `className` | `string` | - | Additional CSS classes |
 | `sideOffset` | `number` | `4` | Distance from trigger |
 | `collisionPadding` | `number` | `8` | Gap kept from viewport edges when flipping/shifting |
-| `align` | `'start' \| 'center' \| 'end'` | `'start'` | Alignment |
+| `align` | `'start' \| 'center' \| 'end'` | `'center'` | Alignment (inherited from Radix) |
 | `autoGroup` | `boolean` | `true` | Auto-wrap loose items in boxed groups |
 
 ### DropdownMenuItem
@@ -354,6 +334,7 @@ function Example() {
 |------|------|---------|-------------|
 | `variant` | `'Default' \| 'info' \| 'Negative'` | `'Default'` | Item style variant |
 | `size` | `'S' \| 'M'` | `'M'` | Item size |
+| `inset` | `boolean` | `false` | Add left padding to align with items that have icons |
 | `disabled` | `boolean` | `false` | Disabled state |
 | `active` | `boolean` | `false` | Active state |
 | `onSelect` | `(event) => void` | - | Select handler |
@@ -365,6 +346,7 @@ function Example() {
 | `checked` | `boolean \| 'indeterminate'` | `false` | Checked state |
 | `onCheckedChange` | `(checked: boolean) => void` | - | Change handler |
 | `variant` | `'Default' \| 'info' \| 'Negative'` | `'Default'` | Style variant |
+| `size` | `'S' \| 'M'` | `'M'` | Item size |
 
 ### DropdownMenuRadioGroup
 
@@ -379,11 +361,30 @@ function Example() {
 |------|------|---------|-------------|
 | `value` | `string` | Required | Radio option value |
 | `variant` | `'Default' \| 'info' \| 'Negative'` | `'Default'` | Style variant |
+| `size` | `'S' \| 'M'` | `'M'` | Item size |
+
+### DropdownMenuSubTrigger
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `'Default' \| 'info' \| 'Negative'` | `'Default'` | Style variant |
+| `size` | `'S' \| 'M'` | `'M'` | Item size |
+| `inset` | `boolean` | `false` | Add left padding to align with items that have icons |
+| `className` | `string` | - | Additional CSS classes |
+
+### DropdownMenuSubContent
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `'PresentationStyle'` | `'PresentationStyle'` | Visual style variant |
+| `autoGroup` | `boolean` | `true` | Auto-wrap loose items in boxed groups |
+| `className` | `string` | - | Additional CSS classes |
 
 ### DropdownMenuLabel
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
+| `inset` | `boolean` | `false` | Add left padding to align with items that have icons |
 | `className` | `string` | - | Additional CSS classes |
 
 ### DropdownMenuGroup
@@ -419,11 +420,13 @@ export const DropdownMenu: React.FC<DropdownMenuProps>
 
 // Content
 interface DropdownMenuContentProps {
-  variant?: 'SystemStyle' | 'PresentationStyle'
+  variant?: 'PresentationStyle'
   theme?: 'dark' | 'light' | 'default'
   className?: string
   sideOffset?: number
+  collisionPadding?: number
   align?: 'start' | 'center' | 'end'
+  autoGroup?: boolean
 }
 
 export const DropdownMenuContent: React.ForwardRefExoticComponent<DropdownMenuContentProps>
@@ -432,6 +435,7 @@ export const DropdownMenuContent: React.ForwardRefExoticComponent<DropdownMenuCo
 interface DropdownMenuItemProps {
   variant?: 'Default' | 'info' | 'Negative'
   size?: 'S' | 'M'
+  inset?: boolean
   disabled?: boolean
   active?: boolean
   onSelect?: (event: Event) => void
@@ -444,6 +448,7 @@ interface DropdownMenuCheckboxItemProps {
   checked?: boolean | 'indeterminate'
   onCheckedChange?: (checked: boolean) => void
   variant?: 'Default' | 'info' | 'Negative'
+  size?: 'S' | 'M'
 }
 
 export const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<DropdownMenuCheckboxItemProps>
@@ -452,6 +457,8 @@ export const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<DropdownM
 interface DropdownMenuRadioItemProps {
   value: string
   variant?: 'Default' | 'info' | 'Negative'
+  size?: 'S' | 'M'
+  onSelect?: (event: Event) => void
 }
 
 export const DropdownMenuRadioItem: React.ForwardRefExoticComponent<DropdownMenuRadioItemProps>
@@ -598,7 +605,7 @@ describe('DropdownMenu', () => {
 | Bundle size (minified) | ~8kb |
 | Bundle size (gzipped) | ~3kb |
 | Dependencies | @radix-ui/react-dropdown-menu (~15kb) |
-| Max height | 200px (scrollable) |
+| Max height | Radix available height (scrollable) |
 | Tree-shakeable | ✅ |
 
 ## Best Practices

package/docs/components/searchable-select.md

@@ -170,7 +170,7 @@ function ArabicPicker({ options, value, onValueChange }) {
 | `onValueChange` | `(value: string, option: SearchableSelectOption) => void` | - | Called when an option is selected. Receives the value and the full option object. |
 | `placeholder` | `string` | `'Search…'` | Placeholder text for the search input. |
 | `size` | `'XS' \| 'S' \| 'M'` | `'M'` | Field size. |
-| `variant` | `'SystemStyle' \| 'PresentationStyle'` | `'PresentationStyle'` | Visual style variant for the field and dropdown surface. |
+| `variant` | `'PresentationStyle'` | `'PresentationStyle'` | Visual style variant for the field and dropdown surface. |
 | `icon` | `ReactNode` | - | Optional leading icon rendered inside the field. |
 | `theme` | `'dark' \| 'light' \| 'default'` | - | Theme variant, applied via `data-theme`. |
 | `dir` | `string` | - | Text direction (e.g. `'rtl'`) for the field and dropdown. |
@@ -210,7 +210,7 @@ interface SearchableSelectProps {
   onValueChange?: (value: string, option: SearchableSelectOption) => void
   placeholder?: string
   size?: 'XS' | 'S' | 'M'
-  variant?: 'SystemStyle' | 'PresentationStyle'
+  variant?: 'PresentationStyle'
   icon?: ReactNode
   theme?: 'dark' | 'light' | 'default'
   dir?: string

package/docs/components/searchable-table.md

@@ -194,7 +194,7 @@ function AsyncExample() {
 | `searchKeys` | `(keyof T & string)[]` | Every column `key` | Which fields client-side search matches against. |
 | `placeholder` | `string` | `'Search…'` | Input placeholder text. |
 | `size` | `'XS' \| 'S' \| 'M'` | `'M'` | Input size. (`XS` maps the underlying Group to `S` with a tighter input height.) |
-| `variant` | `'SystemStyle' \| 'PresentationStyle'` | `'PresentationStyle'` | Visual style of the input and dropdown surface. |
+| `variant` | `'PresentationStyle'` | `'PresentationStyle'` | Visual style of the input and dropdown surface. |
 | `icon` | `ReactNode` | - | Optional leading icon rendered inside the input. |
 | `theme` | `'dark' \| 'light' \| 'default'` | - | Theme variant, applied via `data-theme`. |
 | `dir` | `string` | - | Text direction (e.g. `'rtl'`), applied to the input group and dropdown. |
@@ -244,7 +244,7 @@ interface SearchableTableProps<T> {
   searchKeys?: (keyof T & string)[]
   placeholder?: string
   size?: 'XS' | 'S' | 'M'
-  variant?: 'SystemStyle' | 'PresentationStyle'
+  variant?: 'PresentationStyle'
   icon?: React.ReactNode
   theme?: Themes
   dir?: string

package/docs/components/tab-switch.md

@@ -0,0 +1,163 @@
+---
+name: TabSwitch
+version: 1.0.0
+status: stable
+category: components/navigation
+tags: [tab-switch, segmented-control, view-switcher, toggle, list-cards, pills]
+last-reviewed: 2026-06-15
+bundle-size: 2.0kb
+dependencies:
+  - "class-variance-authority": "^0.7.0"
+---
+
+# TabSwitch
+
+> A segmented control for picking one option from a small set — the classic List / Cards style pill switcher. The active option renders as a solid raised white pill; thin dividers sit between adjacent inactive options (never flanking the active pill). Controlled, generic over the option value, supports optional per-option icons, three sizes, and theme-aware track/labels. This is the switcher used in the DataViews header to flip between Table / Kanban / Inbox / Tree.
+
+## Installation
+
+```bash
+npm install torch-glare
+```
+
+## Import
+
+```typescript
+import { TabSwitch } from 'torch-glare/lib/components/TabSwitch'
+import type { TabSwitchOption } from 'torch-glare/lib/components/TabSwitch'
+```
+
+## Quick Examples
+
+### Basic Usage (List / Cards)
+
+```typescript
+import { TabSwitch } from 'torch-glare/lib/components/TabSwitch'
+import { useState } from 'react'
+
+function Example() {
+  const [view, setView] = useState('list')
+
+  return (
+    <TabSwitch
+      value={view}
+      onValueChange={setView}
+      options={[
+        { value: 'list', label: 'List', icon: <i className="ri-layout-grid-line" /> },
+        { value: 'cards', label: 'Cards', icon: <i className="ri-grid-fill" /> },
+      ]}
+    />
+  )
+}
+```
+
+### Sizes
+
+```typescript
+<TabSwitch size="S" value={view} onValueChange={setView} options={options} />
+<TabSwitch size="M" value={view} onValueChange={setView} options={options} /> {/* default */}
+<TabSwitch size="L" value={view} onValueChange={setView} options={options} />
+```
+
+### Icons Only
+
+Omit `label` to render an icon-only switcher.
+
+```typescript
+<TabSwitch
+  value={view}
+  onValueChange={setView}
+  options={[
+    { value: 'list', icon: <i className="ri-layout-grid-line" /> },
+    { value: 'cards', icon: <i className="ri-grid-fill" /> },
+    { value: 'board', icon: <i className="ri-layout-column-line" /> },
+  ]}
+/>
+```
+
+### On a dark surface
+
+The active pill is always a solid white pill with dark text, so it stays visible on dark bars. The track and inactive labels follow the theme — pass `theme="dark"` (or render inside a `data-theme="dark"` scope) so they resolve dark-theme tokens. This is how the DataViews header uses it.
+
+```typescript
+<div data-theme="dark" className="bg-black p-2">
+  <TabSwitch theme="dark" value={view} onValueChange={setView} options={options} />
+</div>
+```
+
+### Disabled
+
+```typescript
+{/* whole control */}
+<TabSwitch disabled value={view} onValueChange={setView} options={options} />
+
+{/* a single option */}
+<TabSwitch
+  value={view}
+  onValueChange={setView}
+  options={[
+    { value: 'list', label: 'List' },
+    { value: 'cards', label: 'Cards', disabled: true },
+  ]}
+/>
+```
+
+## API Reference
+
+### TabSwitch
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `options` | `TabSwitchOption[]` | — (required) | The selectable options rendered as segments. |
+| `value` | `string` | — | The currently selected option value (controlled). |
+| `onValueChange` | `(value: string) => void` | — | Called with the option value when a segment is selected. |
+| `size` | `'S' \| 'M' \| 'L'` | `'M'` | Size of the control. |
+| `disabled` | `boolean` | `false` | Disables the whole control. |
+| `theme` | `'dark' \| 'light' \| 'default'` | — | Applies a fixed theme to the track and inactive labels (the active pill stays white). |
+| `className` | `string` | — | Additional classes merged onto the track. |
+
+`TabSwitch` is generic over the option value: `TabSwitch<T extends string>` infers `T` from `options`, so `value` and `onValueChange` are typed to your union (e.g. `'list' | 'cards'`).
+
+### TabSwitchOption
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string` | — | Unique value for the option. |
+| `label` | `ReactNode` | `undefined` | Text or node shown for the option. Omit for an icon-only segment. |
+| `icon` | `ReactNode` | `undefined` | Optional leading icon rendered before the label. |
+| `disabled` | `boolean` | `false` | Disables this individual option. |
+
+## Accessibility
+
+- The track is a `role="tablist"`; each option is a `role="tab"` with `aria-selected` reflecting the active state.
+- Options are real `<button>` elements, so they are keyboard-focusable and activate on Enter/Space.
+
+## Notes
+
+- The active pill is intentionally a solid white pill with dark text in every theme (not derived from the per-theme selected-tab tokens), so it reads correctly on the always-dark DataViews header as well as on light surfaces.
+- TabSwitch is a controlled component — always pass both `value` and `onValueChange`.
+
+## TypeScript
+
+```typescript
+interface TabSwitchOption<T extends string = string> {
+  value: T
+  label?: React.ReactNode
+  icon?: React.ReactNode
+  disabled?: boolean
+}
+
+interface TabSwitchProps<T extends string = string>
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  options: TabSwitchOption<T>[]
+  value: T
+  onValueChange: (value: T) => void
+  size?: 'S' | 'M' | 'L'
+  theme?: 'dark' | 'light' | 'default'
+  disabled?: boolean
+}
+
+declare function TabSwitch<T extends string = string>(
+  props: TabSwitchProps<T> & { ref?: React.ForwardedRef<HTMLDivElement> }
+): React.ReactElement
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "torch-glare",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "type": "module",
   "license": "MIT",
   "files": [