@vllnt/ui 0.2.1 → 0.3.0-canary.a42d8f4

package/dist/components/document-sibling-nav/document-sibling-nav.js

@@ -0,0 +1,111 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const navVariants = cva("grid w-full gap-3 text-sm sm:grid-cols-2", {
+  defaultVariants: {
+    variant: "with-title"
+  },
+  variants: {
+    variant: {
+      compact: "",
+      "with-meta": "",
+      "with-title": ""
+    }
+  }
+});
+const itemVariants = cva(
+  "group flex flex-col gap-1 rounded-lg border border-border bg-background p-4 text-foreground transition-colors hover:border-foreground/30 hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+  {
+    defaultVariants: {
+      side: "previous"
+    },
+    variants: {
+      side: {
+        next: "items-end text-right sm:col-start-2",
+        previous: "items-start text-left"
+      }
+    }
+  }
+);
+const DEFAULT_LABELS = {
+  navigation: "Document navigation",
+  next: "Newer",
+  previous: "Older"
+};
+function SiblingItem({
+  ariaLabel,
+  caption,
+  link,
+  side,
+  variant
+}) {
+  const { anchorProps, href, meta, title } = link;
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      "aria-label": ariaLabel,
+      className: cn(itemVariants({ side })),
+      href,
+      ...anchorProps,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: caption }),
+        variant === "compact" ? null : /* @__PURE__ */ jsx("span", { className: "line-clamp-2 text-sm font-semibold text-foreground group-hover:underline", children: title }),
+        variant === "with-meta" && meta ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: meta }) : null
+      ]
+    }
+  );
+}
+function buildAriaLabel(caption, link, variant) {
+  if (variant === "compact" || typeof link.title !== "string") {
+    return caption;
+  }
+  return `${caption}: ${link.title}`;
+}
+const DocumentSiblingNav = forwardRef(({ className, labels, next, previous, variant, ...rest }, ref) => {
+  if (!previous && !next) return null;
+  const resolvedVariant = variant ?? "with-title";
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      "aria-label": resolvedLabels.navigation,
+      className: cn(navVariants({ variant: resolvedVariant }), className),
+      ref,
+      ...rest,
+      children: [
+        previous ? /* @__PURE__ */ jsx(
+          SiblingItem,
+          {
+            ariaLabel: buildAriaLabel(
+              resolvedLabels.previous,
+              previous,
+              resolvedVariant
+            ),
+            caption: resolvedLabels.previous,
+            link: previous,
+            side: "previous",
+            variant: resolvedVariant
+          }
+        ) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true" }),
+        next ? /* @__PURE__ */ jsx(
+          SiblingItem,
+          {
+            ariaLabel: buildAriaLabel(resolvedLabels.next, next, resolvedVariant),
+            caption: resolvedLabels.next,
+            link: next,
+            side: "next",
+            variant: resolvedVariant
+          }
+        ) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true" })
+      ]
+    }
+  );
+});
+DocumentSiblingNav.displayName = "DocumentSiblingNav";
+export {
+  DocumentSiblingNav,
+  navVariants as documentSiblingNavVariants
+};

package/dist/components/document-sibling-nav/index.js

@@ -0,0 +1,8 @@
+import {
+  DocumentSiblingNav,
+  documentSiblingNavVariants
+} from "./document-sibling-nav";
+export {
+  DocumentSiblingNav,
+  documentSiblingNavVariants
+};

package/dist/components/dropdown-menu/dropdown-menu.js

@@ -75,7 +75,7 @@ const DropdownMenuCheckboxItem = React.forwardRef(({ checked, children, classNam
     ref: reference,
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx("span", { className: "text-xs", children: "\u2713" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx("span", { className: "text-xs", children: "\u2713" }) }) }),
       children
     ]
   }
@@ -91,7 +91,7 @@ const DropdownMenuRadioItem = React.forwardRef(({ children, className, ...props
     ref: reference,
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx("span", { className: "text-xs", children: "\u25CB" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx("span", { className: "text-xs", children: "\u25CB" }) }) }),
       children
     ]
   }
@@ -113,7 +113,7 @@ DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Separator,
   {
-    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    className: cn("-m-1 h-px bg-muted", className),
     ref: reference,
     ...props
   }

package/dist/components/edge-label/edge-label.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const emphasisClasses = {
+  active: "border-sky-500/30 bg-sky-500/10 text-sky-700 dark:text-sky-300",
+  subtle: "border-border/60 bg-background/90 text-muted-foreground"
+};
+const EdgeLabel = forwardRef(
+  ({ className, emphasis = "subtle", ...props }, ref) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center rounded-full border px-2.5 py-1 text-[11px] font-medium uppercase tracking-[0.18em] shadow-sm",
+        emphasisClasses[emphasis],
+        className
+      ),
+      "data-emphasis": emphasis,
+      ref,
+      ...props
+    }
+  )
+);
+EdgeLabel.displayName = "EdgeLabel";
+export {
+  EdgeLabel
+};

package/dist/components/edge-label/index.js

@@ -0,0 +1,4 @@
+import { EdgeLabel } from "./edge-label";
+export {
+  EdgeLabel
+};

package/dist/components/empty-state/empty-state.js

@@ -0,0 +1,93 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const emptyStateVariants = cva(
+  "flex flex-col items-center justify-center gap-3 text-center text-foreground",
+  {
+    defaultVariants: {
+      size: "md"
+    },
+    variants: {
+      size: {
+        lg: "px-6 py-16",
+        md: "px-4 py-10",
+        sm: "px-3 py-6"
+      }
+    }
+  }
+);
+const titleVariants = cva("font-semibold tracking-tight", {
+  defaultVariants: {
+    size: "md"
+  },
+  variants: {
+    size: {
+      lg: "text-xl",
+      md: "text-lg",
+      sm: "text-base"
+    }
+  }
+});
+const descriptionVariants = cva("max-w-prose text-muted-foreground", {
+  defaultVariants: {
+    size: "md"
+  },
+  variants: {
+    size: {
+      lg: "text-base",
+      md: "text-sm",
+      sm: "text-xs"
+    }
+  }
+});
+const iconVariants = cva(
+  "mb-1 flex items-center justify-center rounded-full bg-muted text-muted-foreground [&_svg]:h-1/2 [&_svg]:w-1/2",
+  {
+    defaultVariants: {
+      size: "md"
+    },
+    variants: {
+      size: {
+        lg: "size-16",
+        md: "size-12",
+        sm: "size-8"
+      }
+    }
+  }
+);
+const EmptyState = forwardRef(
+  ({
+    children,
+    className,
+    description,
+    icon,
+    role: roleOverride,
+    size,
+    title,
+    ...rest
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(emptyStateVariants({ size }), className),
+        ref,
+        role: roleOverride ?? "status",
+        ...rest,
+        children: [
+          icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn(iconVariants({ size })), children: icon }) : null,
+          title ? /* @__PURE__ */ jsx("h3", { className: cn(titleVariants({ size })), children: title }) : null,
+          description ? /* @__PURE__ */ jsx("p", { className: cn(descriptionVariants({ size })), children: description }) : null,
+          children ? /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap items-center justify-center gap-2", children }) : null
+        ]
+      }
+    );
+  }
+);
+EmptyState.displayName = "EmptyState";
+export {
+  EmptyState,
+  emptyStateVariants
+};

package/dist/components/empty-state/index.js

@@ -0,0 +1,8 @@
+import {
+  EmptyState,
+  emptyStateVariants
+} from "./empty-state";
+export {
+  EmptyState,
+  emptyStateVariants
+};

package/dist/components/era-comparison/era-comparison.js

@@ -0,0 +1,198 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useMemo
+} from "react";
+import { cn } from "../../lib/utils";
+const ERA_PALETTE = {
+  amber: {
+    accent: "bg-amber-500",
+    chip: "bg-amber-500/15 text-amber-700 dark:text-amber-300"
+  },
+  blue: {
+    accent: "bg-blue-500",
+    chip: "bg-blue-500/15 text-blue-700 dark:text-blue-300"
+  },
+  emerald: {
+    accent: "bg-emerald-500",
+    chip: "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300"
+  },
+  neutral: {
+    accent: "bg-muted-foreground/40",
+    chip: "bg-muted text-muted-foreground"
+  },
+  purple: {
+    accent: "bg-purple-500",
+    chip: "bg-purple-500/15 text-purple-700 dark:text-purple-300"
+  },
+  red: {
+    accent: "bg-red-500",
+    chip: "bg-red-500/15 text-red-700 dark:text-red-300"
+  },
+  rose: {
+    accent: "bg-rose-500",
+    chip: "bg-rose-500/15 text-rose-700 dark:text-rose-300"
+  }
+};
+const EraColumnContext = createContext({
+  color: "neutral"
+});
+function useEraColumnColor() {
+  return useContext(EraColumnContext).color;
+}
+const EraComparison = forwardRef(
+  ({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx(
+    "section",
+    {
+      className: cn(
+        "grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3",
+        className
+      ),
+      ref,
+      ...rest,
+      children
+    }
+  )
+);
+EraComparison.displayName = "EraComparison";
+function ColumnHeader({
+  color,
+  name,
+  period,
+  region
+}) {
+  const palette = ERA_PALETTE[color];
+  return /* @__PURE__ */ jsxs("header", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn("h-1 w-12 rounded-full", palette.accent)
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold tracking-tight text-foreground", children: name }),
+      period ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "rounded-full px-2 py-0.5 text-xs font-mono",
+            palette.chip
+          ),
+          children: period
+        }
+      ) : null
+    ] }),
+    region ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: region }) : null
+  ] });
+}
+const EraColumn = forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      className,
+      color = "neutral",
+      name,
+      period,
+      region,
+      ...rest
+    } = props;
+    const contextValue = useMemo(
+      () => ({ color }),
+      [color]
+    );
+    return /* @__PURE__ */ jsx(EraColumnContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+      "article",
+      {
+        className: cn(
+          "flex flex-col gap-3 rounded-2xl border border-border bg-background p-4 shadow-sm",
+          className
+        ),
+        "data-color": color,
+        ref,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            ColumnHeader,
+            {
+              color,
+              name,
+              period,
+              region
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children })
+        ]
+      }
+    ) });
+  }
+);
+EraColumn.displayName = "EraColumn";
+const EraDomain = forwardRef(
+  ({ children, className, name, ...rest }, ref) => /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cn("flex flex-col gap-2", className),
+      "data-domain": typeof name === "string" ? name : void 0,
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("h4", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: name }),
+        children
+      ]
+    }
+  )
+);
+EraDomain.displayName = "EraDomain";
+const EraHighlight = forwardRef(
+  ({ children, className, ...rest }, ref) => {
+    const color = useEraColumnColor();
+    const palette = ERA_PALETTE[color];
+    return /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: cn("rounded-md px-2 py-1 text-sm", palette.chip, className),
+        ref,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+EraHighlight.displayName = "EraHighlight";
+const EraFigure = forwardRef(
+  (props, ref) => {
+    const { anchorProps, className, href, name, ...rest } = props;
+    const color = useEraColumnColor();
+    const palette = ERA_PALETTE[color];
+    const baseClass = cn(
+      "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
+      palette.chip,
+      className
+    );
+    if (href) {
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          className: cn(baseClass, "underline-offset-4 hover:underline"),
+          href,
+          ...anchorProps,
+          children: name
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx("span", { className: baseClass, ref, ...rest, children: name });
+  }
+);
+EraFigure.displayName = "EraFigure";
+export {
+  EraColumn,
+  EraComparison,
+  EraDomain,
+  EraFigure,
+  EraHighlight,
+  useEraColumnColor
+};

package/dist/components/era-comparison/index.js

@@ -0,0 +1,16 @@
+import {
+  EraColumn,
+  EraComparison,
+  EraDomain,
+  EraFigure,
+  EraHighlight,
+  useEraColumnColor
+} from "./era-comparison";
+export {
+  EraColumn,
+  EraComparison,
+  EraDomain,
+  EraFigure,
+  EraHighlight,
+  useEraColumnColor
+};

package/dist/components/exercise/exercise.js

@@ -3,18 +3,24 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Check, Dumbbell, Eye, EyeOff } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Button } from "../button";
+import { Button } from "../button/button";
 const difficultyConfig = {
   easy: { className: "text-green-600 dark:text-green-400", label: "Easy" },
   hard: { className: "text-red-600 dark:text-red-400", label: "Hard" },
   medium: { className: "text-amber-600 dark:text-amber-400", label: "Medium" }
 };
-function ExerciseHeader({ completed, config, onToggle, title }) {
+function ExerciseHeader({
+  completed,
+  config,
+  Heading,
+  onToggle,
+  title
+}) {
   return /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4 mb-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsx(Dumbbell, { className: "h-5 w-5 text-primary" }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex size-10 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsx(Dumbbell, { className: "size-5 text-primary" }) }),
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h4", { className: "font-semibold text-foreground", children: title }),
+        /* @__PURE__ */ jsx(Heading, { className: "font-semibold text-foreground", children: title }),
         /* @__PURE__ */ jsx("span", { className: cn("text-xs font-medium", config.className), children: config.label })
       ] })
     ] }),
@@ -26,7 +32,7 @@ function ExerciseHeader({ completed, config, onToggle, title }) {
         size: "sm",
         variant: completed ? "default" : "outline",
         children: completed ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 mr-1" }),
+          /* @__PURE__ */ jsx(Check, { className: "size-4 mr-1" }),
           "Done"
         ] }) : "Mark Complete"
       }
@@ -50,10 +56,10 @@ function ExerciseHint({ hint, onShow, showHint }) {
 function ExerciseSolution({ onToggle, showSolution, solution }) {
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx(Button, { className: "mb-3", onClick: onToggle, size: "sm", variant: "outline", children: showSolution ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(EyeOff, { className: "h-4 w-4 mr-1" }),
+      /* @__PURE__ */ jsx(EyeOff, { className: "size-4 mr-1" }),
       "Hide Solution"
     ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4 mr-1" }),
+      /* @__PURE__ */ jsx(Eye, { className: "size-4 mr-1" }),
       "Show Solution"
     ] }) }),
     showSolution ? /* @__PURE__ */ jsxs("div", { className: "p-4 rounded-lg bg-card border text-sm [&>pre]:my-0", children: [
@@ -63,6 +69,7 @@ function ExerciseSolution({ onToggle, showSolution, solution }) {
   ] });
 }
 function Exercise({
+  as: Heading = "h4",
   children,
   difficulty = "medium",
   hint,
@@ -78,6 +85,7 @@ function Exercise({
       {
         completed,
         config: difficultyConfig[difficulty],
+        Heading,
         onToggle: () => {
           setCompleted(!completed);
         },

package/dist/components/faq/faq.js

@@ -20,7 +20,7 @@ function FAQItem({ children, defaultOpen = false, question }) {
             ChevronDown,
             {
               className: cn(
-                "h-4 w-4 flex-shrink-0 transition-transform duration-200",
+                "size-4 flex-shrink-0 transition-transform duration-200",
                 isOpen && "rotate-180"
               )
             }
@@ -40,11 +40,15 @@ function FAQItem({ children, defaultOpen = false, question }) {
     )
   ] });
 }
-function FAQ({ children, title = "Frequently Asked Questions" }) {
+function FAQ({
+  as: Heading = "h4",
+  children,
+  title = "Frequently Asked Questions"
+}) {
   return /* @__PURE__ */ jsxs("div", { className: "my-6 rounded-lg border bg-card", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-4 border-b border-border", children: [
-      /* @__PURE__ */ jsx(HelpCircle, { className: "h-5 w-5 text-primary" }),
-      /* @__PURE__ */ jsx("h4", { className: "font-semibold", children: title })
+      /* @__PURE__ */ jsx(HelpCircle, { className: "size-5 text-primary" }),
+      /* @__PURE__ */ jsx(Heading, { className: "font-semibold", children: title })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "px-4", children })
   ] });

package/dist/components/file-upload/file-upload.js

@@ -3,16 +3,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { FileUp, UploadCloud, X } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Button } from "../button";
+import { Button } from "../button/button";
 function useFileUploadState(controlledFiles, multiple, onFilesChange) {
   const [internalFiles, setInternalFiles] = React.useState(
     controlledFiles ?? []
   );
-  React.useEffect(() => {
-    if (controlledFiles !== void 0) {
-      setInternalFiles(controlledFiles);
-    }
-  }, [controlledFiles]);
   const resolvedFiles = controlledFiles ?? internalFiles;
   const updateFiles = React.useCallback(
     (nextFiles) => {
@@ -73,7 +68,7 @@ function FileListItem({
         size: "icon",
         type: "button",
         variant: "ghost",
-        children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ jsx(X, { className: "size-4" })
       }
     )
   ] });
@@ -127,13 +122,13 @@ function FileUploadDropzone({
       role: "button",
       tabIndex: disabled ? -1 : 0,
       children: [
-        /* @__PURE__ */ jsx(UploadCloud, { className: "mb-3 h-10 w-10 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(UploadCloud, { className: "mb-3 size-10 text-muted-foreground" }),
         /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
           /* @__PURE__ */ jsx("p", { className: "font-medium", children: dropzoneText }),
           /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: helperText })
         ] }),
         /* @__PURE__ */ jsxs("span", { className: "mt-4 inline-flex h-10 items-center justify-center rounded-md border border-input bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground shadow-sm", children: [
-          /* @__PURE__ */ jsx(FileUp, { className: "mr-2 h-4 w-4" }),
+          /* @__PURE__ */ jsx(FileUp, { className: "mr-2 size-4" }),
           browseLabel
         ] }),
         children

package/dist/components/filter-bar/filter-bar.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { memo, useCallback, useState } from "react";
+import { memo, useCallback, useTransition } from "react";
 import { cn } from "../../lib/utils";
-import { Badge } from "../badge";
+import { Badge } from "../badge/badge";
 function SearchInput({
   disabled,
   label,
@@ -149,25 +149,26 @@ const DEFAULT_LABELS = {
   searchPlaceholder: "Search...",
   tagsLabel: "Tags:"
 };
+const EMPTY_FILTER_BAR_LABELS = {};
 function FilterBarImpl({
   className,
   currentDifficulty,
   currentTags,
   difficultyOptions,
-  labels = {},
+  labels = EMPTY_FILTER_BAR_LABELS,
   onFiltersChange,
   searchQuery,
   tags
 }) {
-  const [isPending, setIsPending] = useState(false);
+  const [isPending, startTransition] = useTransition();
   const mergedLabels = { ...DEFAULT_LABELS, ...labels };
   const handleDifficultyChange = useCallback(
     (difficulty) => {
-      setIsPending(true);
-      onFiltersChange({ difficulty });
-      setIsPending(false);
+      startTransition(() => {
+        onFiltersChange({ difficulty });
+      });
     },
-    [onFiltersChange]
+    [onFiltersChange, startTransition]
   );
   const handleSearchChange = useCallback(
     (search) => {