@boyernick/standard-ui-react 0.1.1-canary.8 → 0.2.0

package/src/code-block.tsx

@@ -4,6 +4,10 @@ import { useState } from "react"
 import { highlight, type LanguageName } from "sugar-high"
 import { Button } from "./button"
 import { IconCheckmark1, IconSquareBehindSquare6 } from "./icons"
+import { cn } from "./lib/cn"
+
+/** 1-based line number, or an inclusive `[start, end]` range. */
+export type CodeBlockHighlightLine = number | readonly [number, number]
 
 export type CodeBlockProps = {
   code: string
@@ -13,12 +17,18 @@ export type CodeBlockProps = {
   showHeader?: boolean
   /** Removes border and radius chrome for nesting inside another frame. */
   bare?: boolean
+  /** 1-based lines (or ranges) to emphasize inside the block. */
+  highlightLines?: readonly CodeBlockHighlightLine[]
+  /** 1-based lines added in a review (green). */
+  addedLines?: readonly CodeBlockHighlightLine[]
+  /** 1-based lines removed in a review (red). */
+  removedLines?: readonly CodeBlockHighlightLine[]
   className?: string
 }
 
 const sizeClass = {
-  sm: "text-2xs p-3",
-  md: "text-xs p-4",
+  sm: "text-2xs py-3",
+  md: "text-xs py-4",
 } as const
 
 const languages = new Set<LanguageName>([
@@ -59,17 +69,60 @@ const getHighlightLanguage = (lang: string): LanguageName => {
   return "typescript"
 }
 
+const toHighlightedLines = (
+  lines?: readonly CodeBlockHighlightLine[],
+): Set<number> => {
+  const set = new Set<number>()
+  if (!lines) return set
+
+  for (const entry of lines) {
+    if (typeof entry === "number") {
+      set.add(entry)
+      continue
+    }
+
+    const [start, end] = entry
+    const from = Math.min(start, end)
+    const to = Math.max(start, end)
+    for (let line = from; line <= to; line += 1) set.add(line)
+  }
+
+  return set
+}
+
 export const CodeBlock = ({
   code: rawCode,
   lang = "tsx",
   size = "md",
   showHeader = true,
   bare = false,
+  highlightLines,
+  addedLines,
+  removedLines,
   className = "",
 }: CodeBlockProps) => {
   const [copied, setCopied] = useState(false)
   const code = rawCode.replace(/^\n/, "").replace(/\n$/, "")
-  const html = highlight(code, { lang: getHighlightLanguage(lang) })
+  const focused = toHighlightedLines(highlightLines)
+  const added = toHighlightedLines(addedLines)
+  const removed = toHighlightedLines(removedLines)
+  const html = highlight(code, {
+    lang: getHighlightLanguage(lang),
+    markLine: (line) => {
+      const number = line.index + 1
+      if (added.has(number)) {
+        line.className += " sh__line--added"
+        return
+      }
+      if (removed.has(number)) {
+        line.className += " sh__line--removed"
+        return
+      }
+      if (focused.has(number)) {
+        line.className += " sh__line--highlighted"
+      }
+    },
+  })
   const frameClass =
     !showHeader && !bare
       ? "rounded-lg border border-border-primary bg-surface"
@@ -87,7 +140,11 @@ export const CodeBlock = ({
 
   const codeContent = (
     <pre
-      className={`sh-code overflow-x-auto font-mono ${sizeClass[size]} ${frameClass}`}
+      className={cn(
+        "sh-code overflow-x-auto font-mono",
+        sizeClass[size],
+        frameClass,
+      )}
       dangerouslySetInnerHTML={{ __html: html }}
     />
   )
@@ -98,7 +155,11 @@ export const CodeBlock = ({
 
   return (
     <div
-      className={`overflow-hidden rounded-xl border border-border-primary bg-surface ${className}`}
+      data-slot="code-block"
+      className={cn(
+        "overflow-hidden rounded-xl border border-border-primary bg-surface",
+        className,
+      )}
     >
       <div className="flex items-center justify-between border-b border-border-primary bg-background-secondary px-3 py-1.5 pl-4">
         <p className="text-xs font-mono text-fg-quaternary">{lang}</p>

package/src/collapsible.tsx

@@ -4,6 +4,7 @@ import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible"
 import type { ComponentProps } from "react"
 import { IconChevronDownSmall } from "./icons"
 import { cn } from "./lib/cn"
+import { focusRing } from "./lib/focus"
 import { motion } from "./lib/motion"
 
 export type CollapsibleProps = ComponentProps<typeof BaseCollapsible.Root>
@@ -23,9 +24,10 @@ export const CollapsibleTrigger = ({
 }: CollapsibleTriggerProps) => (
   <BaseCollapsible.Trigger
     className={cn(
-      "group flex h-9 w-full cursor-pointer items-center justify-between gap-2 rounded-md border border-border-secondary bg-surface px-3 text-sm text-fg-primary inset-shadow-outline-top outline-none",
+      "group flex h-9 w-full cursor-pointer items-center justify-between gap-2 rounded-md border border-border-secondary bg-surface px-3 text-sm text-fg-primary inset-shadow-outline-top",
       motion.colors,
-      "outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+      focusRing,
+      "data-disabled:cursor-not-allowed data-disabled:opacity-50",
       className,
     )}
     {...props}

package/src/combobox.tsx

@@ -4,6 +4,7 @@ import { Combobox as BaseCombobox } from "@base-ui/react/combobox"
 import type { ComponentProps, ReactElement } from "react"
 import { IconChevronDownSmall, IconCrossSmall } from "./icons"
 import { cn } from "./lib/cn"
+import { focusRingWithin, focusRingInvalidWithin } from "./lib/focus"
 import { motion } from "./lib/motion"
 import { popupInset, popupItem, popupLabel, popupMessage, popupSurface } from "./lib/popup"
 
@@ -77,9 +78,9 @@ export const ComboboxInputGroup = ({
 }: ComboboxInputGroupProps) => (
   <BaseCombobox.InputGroup
     className={cn(
-      "relative flex min-h-9 w-full items-center rounded-md border border-border-secondary bg-surface inset-shadow-outline-top outline-none transition-[color,box-shadow]",
-      "focus-within:border-ring focus-within:ring-[3px] focus-within:ring-offset-1 focus-within:ring-offset-background-primary focus-within:ring-ring/20",
-      "aria-invalid:border-destructive aria-invalid:focus-within:border-destructive aria-invalid:focus-within:ring-destructive/20",
+      "relative flex min-h-9 w-full items-center rounded-md border border-border-secondary bg-surface inset-shadow-outline-top transition-[color,box-shadow]",
+      focusRingWithin,
+      focusRingInvalidWithin,
       "has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:focus-within:border-destructive has-[[aria-invalid=true]]:focus-within:ring-destructive/20",
       "has-[:disabled]:opacity-50",
       className,

package/src/command.tsx

@@ -4,8 +4,10 @@ import { Dialog as BaseDialog } from "@base-ui/react/dialog"
 import {
   createContext,
   useContext,
+  useEffect,
   useId,
   useMemo,
+  useRef,
   type ButtonHTMLAttributes,
   type ComponentProps,
   type HTMLAttributes,
@@ -13,7 +15,9 @@ import {
   type ReactNode,
 } from "react"
 import { IconCrossSmall, IconMagnifyingGlass } from "./icons"
+import { filterGroupVariants, filterItemVariants } from "./filter-group"
 import { cn } from "./lib/cn"
+import { focusRing } from "./lib/focus"
 import { motion } from "./lib/motion"
 
 type CommandContextValue = {
@@ -49,7 +53,9 @@ export type CommandClearProps = ButtonHTMLAttributes<HTMLButtonElement>
 export type CommandCloseProps = ComponentProps<typeof BaseDialog.Close>
 export type CommandDividerProps = HTMLAttributes<HTMLDivElement>
 export type CommandContentProps = HTMLAttributes<HTMLDivElement>
+/** @deprecated Use FilterGroup for new filter controls. */
 export type CommandFiltersProps = HTMLAttributes<HTMLUListElement>
+/** @deprecated Use FilterItem for new filter controls. */
 export type CommandFilterProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   selected?: boolean
 }
@@ -108,7 +114,7 @@ export const CommandBackdrop = ({
 export const CommandPopup = ({ className, ...props }: CommandPopupProps) => (
   <BaseDialog.Popup
     className={cn(
-      "fixed top-1/2 left-1/2 z-50 flex h-[min(80vh,32rem)] w-full max-w-3xl -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-2xl bg-surface-raised shadow-ambient outline-none max-sm:max-w-[calc(100vw-2rem)]",
+      "fixed top-1/2 left-1/2 z-50 flex h-[min(80vh,32rem)] w-[calc(100vw-2rem)] max-w-3xl -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-2xl bg-surface-raised shadow-ambient outline-none",
       motion.popupCenter,
       className,
     )}
@@ -173,9 +179,10 @@ export const CommandClear = ({
   <button
     type="button"
     className={cn(
-      "inline-flex h-8 cursor-pointer items-center rounded-full border border-transparent px-3 text-sm text-fg-quaternary outline-none",
+      "inline-flex h-8 cursor-pointer items-center rounded-full border border-transparent px-3 text-sm text-fg-quaternary",
       motion.colors,
-      "hover:bg-background-tertiary hover:text-fg-primary focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20 data-[active=true]:text-fg-primary",
+      focusRing,
+      "hover:bg-background-tertiary hover:text-fg-primary data-[active=true]:text-fg-primary",
       className,
     )}
     {...props}
@@ -202,9 +209,10 @@ export const CommandClose = ({
 }: CommandCloseProps) => (
   <BaseDialog.Close
     className={cn(
-      "inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-full border border-transparent text-fg-primary outline-none",
+      "inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-full border border-transparent text-fg-primary",
       motion.colors,
-      "hover:bg-background-tertiary focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20",
+      focusRing,
+      "hover:bg-background-tertiary",
       className,
     )}
     aria-label={props["aria-label"] ?? "Close"}
@@ -222,7 +230,7 @@ export const CommandContent = ({
 }: CommandContentProps) => (
   <div
     className={cn(
-      "flex min-h-0 flex-1 flex-col gap-3 overflow-x-visible overflow-y-auto overscroll-contain px-4 pt-1 pb-5",
+      "flex min-h-0 flex-1 flex-col gap-3 overflow-hidden px-4 pt-1 pb-5",
       className,
     )}
     {...props}
@@ -236,7 +244,8 @@ export const CommandFilters = ({
   <ul
     role="list"
     className={cn(
-      "flex shrink-0 flex-wrap justify-start gap-1.5 py-1.5",
+      filterGroupVariants({ variant: "pill" }),
+      "w-full shrink-0 justify-start py-1.5",
       className,
     )}
     {...props}
@@ -254,11 +263,10 @@ export const CommandFilter = ({
       type="button"
       aria-pressed={selected}
       data-selected={selected || undefined}
+      data-pressed={selected || undefined}
       className={cn(
-        "inline-flex h-9 cursor-pointer items-center rounded-full border border-transparent px-4 text-sm text-fg-quaternary outline-none",
+        filterItemVariants({ variant: "pill", size: "md" }),
         motion.colors,
-        "hover:text-fg-primary focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20",
-        "data-selected:bg-background-tertiary data-selected:text-fg-primary",
         className,
       )}
       {...props}
@@ -276,7 +284,7 @@ export const CommandList = ({ className, ...props }: CommandListProps) => {
       id={listboxId}
       role="listbox"
       className={cn(
-        "grid min-h-0 flex-1 content-start gap-0 overflow-visible overscroll-contain py-0.5",
+        "grid min-h-0 flex-1 content-start gap-0 overflow-y-auto overscroll-contain p-1",
         className,
       )}
       {...props}
@@ -294,12 +302,21 @@ export const CommandItem = ({
   onClick,
   ...props
 }: CommandItemProps) => {
+  const ref = useRef<HTMLAnchorElement & HTMLButtonElement>(null)
+
+  // Keyboard selection moves the highlight without moving focus, so nothing
+  // scrolls the list on its own. `nearest` only acts when the row is actually
+  // out of view, which leaves hover-driven selection alone.
+  useEffect(() => {
+    if (selected) ref.current?.scrollIntoView({ block: "nearest" })
+  }, [selected])
+
   const itemClassName = cn(
-    "flex h-15 min-h-15 w-full cursor-pointer items-center justify-between gap-4 rounded-lg border border-transparent px-4 text-left text-sm font-medium text-fg-primary outline-none select-none",
+    "flex h-15 min-h-15 w-full cursor-pointer items-center justify-between gap-4 rounded-lg border border-transparent px-4 text-left text-sm font-medium text-fg-primary select-none",
     motion.colors,
     "hover:bg-background-tertiary data-selected:bg-background-tertiary",
     "data-disabled:cursor-not-allowed data-disabled:opacity-50",
-    "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20",
+    focusRing,
     className,
   )
 
@@ -307,6 +324,7 @@ export const CommandItem = ({
     <li role="presentation" className="m-0">
       {href ? (
         <a
+          ref={ref}
           id={id}
           href={disabled ? undefined : href}
           role="option"
@@ -322,6 +340,7 @@ export const CommandItem = ({
         </a>
       ) : (
         <button
+          ref={ref}
           id={id}
           type="button"
           role="option"
@@ -368,6 +387,15 @@ export const CommandTitle = ({ className, children }: CommandTitleProps) => (
   <span className={cn("min-w-0 truncate", className)}>{children}</span>
 )
 
+export type CommandMetaProps = HTMLAttributes<HTMLSpanElement>
+
+export const CommandMeta = ({ className, ...props }: CommandMetaProps) => (
+  <span
+    className={cn("shrink-0 text-xs font-normal text-fg-tertiary", className)}
+    {...props}
+  />
+)
+
 export const CommandDialogTitle = ({
   className,
   ...props

package/src/date-picker.tsx

@@ -62,11 +62,16 @@ const DatePickerTrigger = ({
     render={
       <Button
         type="button"
-        size="sm"
+        // Default md height, so the trigger lines up with every other field
+        // in a form rather than sitting 4px short of them.
+        size="md"
         variant="outline"
         disabled={disabled}
         prefix={<IconCalendar1 aria-hidden />}
-        className={cn("w-56 justify-start", className)}
+        // The outline button fills on hover, which is right for a button and
+        // wrong here: this reads as a field, and fields in the system keep
+        // their surface. The border and the popover carry the state.
+        className={cn("w-56 justify-start hover:bg-surface", className)}
       />
     }
   >

package/src/dialog.tsx

@@ -2,6 +2,7 @@
 
 import { Dialog as BaseDialog } from "@base-ui/react/dialog"
 import type { ComponentProps, HTMLAttributes } from "react"
+import { useRef } from "react"
 import { cn } from "./lib/cn"
 import { motion } from "./lib/motion"
 
@@ -41,16 +42,38 @@ export const DialogBackdrop = ({
   />
 )
 
-export const DialogPopup = ({ className, ...props }: DialogPopupProps) => (
-  <BaseDialog.Popup
-    className={cn(
-      "fixed top-1/2 left-1/2 z-50 flex w-full max-w-md -translate-x-1/2 -translate-y-1/2 flex-col gap-6 rounded-xl border border-border-primary bg-surface-raised p-5 shadow-md outline-none max-sm:max-w-[calc(100vw-2rem)]",
-      motion.popupCenter,
-      className,
-    )}
-    {...props}
-  />
-)
+export const DialogPopup = ({
+  className,
+  initialFocus,
+  ref,
+  ...props
+}: DialogPopupProps) => {
+  const popupRef = useRef<HTMLDivElement | null>(null)
+
+  const setRef = (node: HTMLDivElement | null) => {
+    popupRef.current = node
+    if (typeof ref === "function") ref(node)
+    else if (ref) ref.current = node
+  }
+
+  return (
+    <BaseDialog.Popup
+      ref={setRef}
+      // Base UI focuses the first tabbable element by default. In a dialog long
+      // enough to scroll that is usually the action at the bottom, and focusing
+      // it scrolls the body to the end before the reader has seen the start —
+      // so the popup takes focus itself, which is what its `tabindex="-1"` is
+      // for. Callers can still name their own target.
+      initialFocus={initialFocus ?? popupRef}
+      className={cn(
+        "fixed top-1/2 left-1/2 z-50 flex w-full max-w-md -translate-x-1/2 -translate-y-1/2 flex-col gap-6 rounded-xl border border-border-primary bg-surface-raised p-5 shadow-md outline-none max-h-[calc(100dvh-2rem)] overflow-y-auto max-sm:max-w-[calc(100vw-2rem)]",
+        motion.popupCenter,
+        className,
+      )}
+      {...props}
+    />
+  )
+}
 
 export const DialogTitle = ({ className, ...props }: DialogTitleProps) => (
   <BaseDialog.Title

package/src/empty.tsx

@@ -10,7 +10,7 @@ export type EmptyActionsProps = ComponentProps<"div">;
 export const Empty = ({ className, ...props }: EmptyProps) => (
   <div
     className={cn(
-      "flex min-h-48 flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-border-primary bg-surface p-8 text-center",
+      "flex min-h-48 flex-col items-center justify-center rounded-xl border border-dashed border-border-primary bg-surface p-8 text-center",
       className,
     )}
     {...props}
@@ -20,7 +20,7 @@ export const Empty = ({ className, ...props }: EmptyProps) => (
 export const EmptyIcon = ({ className, ...props }: EmptyIconProps) => (
   <div
     className={cn(
-      "flex size-10 items-center justify-center rounded-lg bg-background-tertiary text-fg-secondary [&_svg]:size-5",
+      "mb-4 flex size-10 items-center justify-center rounded-lg bg-background-tertiary text-fg-secondary [&_svg]:size-5",
       className,
     )}
     {...props}
@@ -36,7 +36,7 @@ export const EmptyDescription = ({
   ...props
 }: EmptyDescriptionProps) => (
   <p
-    className={cn("max-w-sm text-sm text-fg-secondary", className)}
+    className={cn("mt-1 max-w-sm text-sm text-fg-secondary", className)}
     {...props}
   />
 );
@@ -44,7 +44,7 @@ export const EmptyDescription = ({
 export const EmptyActions = ({ className, ...props }: EmptyActionsProps) => (
   <div
     className={cn(
-      "mt-1 flex flex-wrap items-center justify-center gap-2",
+      "mt-4 flex flex-wrap items-center justify-center gap-2",
       className,
     )}
     {...props}

package/src/field.tsx

@@ -3,6 +3,7 @@
 import { Field as BaseField } from "@base-ui/react/field"
 import type { ComponentProps } from "react"
 import { cn } from "./lib/cn"
+import { focusRing, focusRingInvalid } from "./lib/focus"
 
 export type FieldProps = ComponentProps<typeof BaseField.Root>
 export type FieldLabelProps = ComponentProps<typeof BaseField.Label>
@@ -49,10 +50,10 @@ export const FieldError = ({ className, ...props }: FieldErrorProps) => (
 export const FieldControl = ({ className, ...props }: FieldControlProps) => (
   <BaseField.Control
     className={cn(
-      "text-sm flex h-9 w-full cursor-text rounded-md border border-border-secondary bg-surface px-3 text-fg-primary inset-shadow-outline-top outline-none transition-[color,box-shadow] duration-[var(--duration-sm)] ease-enter placeholder:text-fg-quaternary",
-      "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20",
+      "text-sm flex h-9 w-full cursor-text rounded-md border border-border-secondary bg-surface px-3 text-fg-primary inset-shadow-outline-top transition-[color,box-shadow] duration-[var(--duration-sm)] ease-enter placeholder:text-fg-quaternary",
+      focusRing,
+      focusRingInvalid,
       "data-invalid:border-destructive data-invalid:focus-visible:border-destructive data-invalid:focus-visible:ring-destructive/20",
-      "aria-invalid:border-destructive aria-invalid:focus-visible:border-destructive aria-invalid:focus-visible:ring-destructive/20",
       "data-disabled:cursor-not-allowed data-disabled:opacity-50",
       className,
     )}

package/src/filter-group.tsx

@@ -0,0 +1,143 @@
+"use client"
+
+import { Toggle as BaseToggle } from "@base-ui/react/toggle"
+import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group"
+import { cva, type VariantProps } from "class-variance-authority"
+import { createContext, type ComponentProps, useContext } from "react"
+import { cn } from "./lib/cn"
+import { focusRing } from "./lib/focus"
+import { motion } from "./lib/motion"
+
+const filterGroupVariants = cva("flex w-fit items-center", {
+  variants: {
+    variant: {
+      pill: "flex-wrap gap-1",
+      segmented: "gap-0.5 rounded-lg bg-background-tertiary p-0.5",
+    },
+  },
+  defaultVariants: {
+    variant: "pill",
+  },
+})
+
+const filterItemVariants = cva(
+  cn(
+    "group/filter-item inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap border border-transparent text-fg-tertiary hover:text-fg-primary data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:text-fg-primary",
+    focusRing,
+  ),
+  {
+    variants: {
+      variant: {
+        pill: "rounded-full hover:bg-background-tertiary data-pressed:bg-background-tertiary",
+        segmented:
+          "rounded-md hover:bg-background-quaternary data-pressed:bg-surface-raised data-pressed:shadow-hairline",
+      },
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-sm",
+      },
+    },
+    compoundVariants: [
+      { variant: "pill", size: "sm", class: "h-8 px-3" },
+      { variant: "pill", size: "md", class: "h-9 px-4" },
+      { variant: "pill", size: "lg", class: "h-10 px-5" },
+      { variant: "segmented", size: "sm", class: "h-7 px-2.5" },
+      { variant: "segmented", size: "md", class: "h-8 px-3" },
+      { variant: "segmented", size: "lg", class: "h-9 px-3.5" },
+    ],
+    defaultVariants: {
+      variant: "pill",
+      size: "md",
+    },
+  },
+)
+
+export type FilterGroupVariant = NonNullable<
+  VariantProps<typeof filterGroupVariants>["variant"]
+>
+export type FilterGroupSize = NonNullable<
+  VariantProps<typeof filterItemVariants>["size"]
+>
+
+type FilterGroupStyleContextValue = {
+  variant: FilterGroupVariant
+  size: FilterGroupSize
+}
+
+const FilterGroupStyleContext = createContext<FilterGroupStyleContextValue>({
+  variant: "pill",
+  size: "md",
+})
+
+export type FilterGroupProps = ComponentProps<typeof BaseToggleGroup> &
+  VariantProps<typeof filterGroupVariants> & {
+    /** Whether pressing the active item can clear a single-select group. */
+    allowEmpty?: boolean
+    size?: FilterGroupSize
+  }
+export type FilterItemProps = ComponentProps<typeof BaseToggle> &
+  VariantProps<typeof filterItemVariants>
+export type FilterCountProps = ComponentProps<"span">
+
+export const FilterGroup = ({
+  className,
+  variant = "pill",
+  size = "md",
+  allowEmpty = false,
+  multiple = false,
+  onValueChange,
+  ...props
+}: FilterGroupProps) => (
+  <FilterGroupStyleContext.Provider value={{ variant: variant ?? "pill", size }}>
+    <BaseToggleGroup
+      className={cn(filterGroupVariants({ variant }), className)}
+      multiple={multiple}
+      onValueChange={(value, eventDetails) => {
+        if (!multiple && !allowEmpty && value.length === 0) {
+          eventDetails.cancel()
+          return
+        }
+        onValueChange?.(value, eventDetails)
+      }}
+      {...props}
+    />
+  </FilterGroupStyleContext.Provider>
+)
+
+export const FilterItem = ({
+  className,
+  variant,
+  size,
+  type = "button",
+  ...props
+}: FilterItemProps) => {
+  const styles = useContext(FilterGroupStyleContext)
+
+  return (
+    <BaseToggle
+      type={type}
+      className={cn(
+        filterItemVariants({
+          variant: variant ?? styles.variant,
+          size: size ?? styles.size,
+        }),
+        motion.colors,
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export const FilterCount = ({ className, ...props }: FilterCountProps) => (
+  <span
+    className={cn(
+      "text-2xs-strong inline-flex min-w-4 items-center justify-center rounded-full bg-background-quaternary px-1 py-0.5 text-fg-secondary tabular-nums group-data-pressed/filter-item:bg-surface",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export { filterGroupVariants, filterItemVariants }