@zentauri-ui/zentauri-components 1.4.5 → 1.4.7

package/src/ui/progress/progress-base.tsx

@@ -1,6 +1,15 @@
 "use client";
 
-import { createContext, useContext, useMemo } from "react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useId,
+  useRef,
+  useState,
+} from "react";
 
 import { cn, clamp } from "../../lib/utils";
 
@@ -35,11 +44,37 @@ export function ProgressBase(props: ProgressProps) {
     label,
     children,
     ref,
-    as:Wrapper = "div",
+    as: Wrapper = "div",
     ...rest
   } = props;
   const clamped = clamp(value, min, max);
   const percent = max === min ? 0 : ((clamped - min) / (max - min)) * 100;
+  const labelSlotId = `${useId()}-progress-label`;
+  const labelSlotCountRef = useRef(0);
+  const [labelSlotMounted, setLabelSlotMounted] = useState(false);
+  const registerProgressLabel = useCallback(() => {
+    labelSlotCountRef.current += 1;
+    if (labelSlotCountRef.current === 1) {
+      setLabelSlotMounted(true);
+    }
+    return () => {
+      labelSlotCountRef.current -= 1;
+      if (labelSlotCountRef.current === 0) {
+        setLabelSlotMounted(false);
+      }
+    };
+  }, []);
+  const hasInlineLabelProp = Boolean(label?.trim().length);
+
+  const labelingProps = useMemo(() => {
+    if (hasInlineLabelProp) {
+      return { "aria-label": label?.trim() ?? "Progress" };
+    }
+    if (labelSlotMounted) {
+      return { "aria-labelledby": labelSlotId };
+    }
+    return { "aria-label": "Progress" };
+  }, [hasInlineLabelProp, label, labelSlotId, labelSlotMounted]);
 
   const ctx = useMemo(
     () => ({
@@ -51,8 +86,21 @@ export function ProgressBase(props: ProgressProps) {
       striped: Boolean(striped),
       animated: Boolean(animated),
       appearance: appearance ?? "default",
+      labelSlotId,
+      registerProgressLabel,
     }),
-    [animated, appearance, clamped, max, min, shape, size, striped],
+    [
+      animated,
+      appearance,
+      clamped,
+      labelSlotId,
+      max,
+      min,
+      registerProgressLabel,
+      shape,
+      size,
+      striped,
+    ],
   );
 
   return (
@@ -64,7 +112,7 @@ export function ProgressBase(props: ProgressProps) {
         aria-valuemin={min}
         aria-valuemax={max}
         aria-valuenow={clamped}
-        aria-label={label}
+        {...labelingProps}
         className={cn(
           progressVariants({ appearance, size, shape, striped, animated }),
           className,
@@ -87,7 +135,7 @@ export function ProgressBar({
   className,
   style,
   ref,
-  as:Wrapper = "div",
+  as: Wrapper = "div",
   ...rest
 }: ProgressSectionProps & {
   style?: React.CSSProperties;
@@ -121,8 +169,16 @@ export function ProgressBar({
 ProgressBar.displayName = "ProgressBar";
 
 export function ProgressLabel({ className, children }: ProgressSectionProps) {
+  const { labelSlotId, registerProgressLabel } =
+    useProgressContext("ProgressLabel");
+
+  useEffect(() => {
+    return registerProgressLabel();
+  }, [registerProgressLabel]);
+
   return (
     <div
+      id={labelSlotId}
       data-slot="progress-label"
       className={cn("mb-2 font-medium text-slate-200", className)}
     >

package/src/ui/progress/progress.test.tsx

@@ -2,9 +2,7 @@ import { createRef } from "react";
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
 
-import {
-  Progress,
-} from "./progress";
+import { Progress } from "./progress";
 import { ProgressBar, ProgressLabel, ProgressValue } from "./progress-base";
 
 describe("Progress", () => {

package/src/ui/progress/progress.tsx

@@ -2,11 +2,7 @@ import { ProgressBase } from "./progress-base";
 import type { ProgressProps } from "./types";
 
 export const Progress = (props: ProgressProps) => {
-  return (
-    <ProgressBase
-      {...props}
-    />
-  );
+  return <ProgressBase {...props} />;
 };
 
-Progress.displayName = "Progress";
+Progress.displayName = "Progress";

package/src/ui/progress/types.ts

@@ -30,4 +30,7 @@ export type ProgressCtx = {
   striped: boolean;
   animated: boolean;
   appearance: NonNullable<ProgressProps["appearance"]>;
+  labelSlotId: string;
+  /** Increments the label mount count; returned cleanup decrements. Multiple labels are supported. */
+  registerProgressLabel: () => () => void;
 };

package/src/ui/search/filter-search-suggestions.test.ts

@@ -4,35 +4,63 @@ import { filterSearchSuggestions } from "./filter-search-suggestions";
 import type { SearchFilterable } from "./types";
 
 const sampleItems: SearchFilterable[] = [
-  { id: "1", label: "Installation", href: "/preview/installation", keywords: ["npm", "setup"] },
+  {
+    id: "1",
+    label: "Installation",
+    href: "/preview/installation",
+    keywords: ["npm", "setup"],
+  },
   { id: "2", label: "Modal", href: "/preview/components/modal" },
-  { id: "3", label: "GitHub", href: "https://example.com/repo", keywords: ["github", "source"] },
+  {
+    id: "3",
+    label: "GitHub",
+    href: "https://example.com/repo",
+    keywords: ["github", "source"],
+  },
 ];
 
 describe("filterSearchSuggestions", () => {
   it("returns empty list for whitespace-only query", () => {
-    expect(filterSearchSuggestions({ query: "   ", items: sampleItems })).toEqual([]);
+    expect(
+      filterSearchSuggestions({ query: "   ", items: sampleItems }),
+    ).toEqual([]);
   });
 
   it("returns empty list for empty query", () => {
-    expect(filterSearchSuggestions({ query: "", items: sampleItems })).toEqual([]);
+    expect(filterSearchSuggestions({ query: "", items: sampleItems })).toEqual(
+      [],
+    );
   });
 
   it("matches label case-insensitively", () => {
-    expect(filterSearchSuggestions({ query: "modal", items: sampleItems })).toEqual([
-      { id: "2", label: "Modal", href: "/preview/components/modal" },
-    ]);
+    expect(
+      filterSearchSuggestions({ query: "modal", items: sampleItems }),
+    ).toEqual([{ id: "2", label: "Modal", href: "/preview/components/modal" }]);
   });
 
   it("matches href substring", () => {
-    expect(filterSearchSuggestions({ query: "installation", items: sampleItems })).toEqual([
-      { id: "1", label: "Installation", href: "/preview/installation", keywords: ["npm", "setup"] },
+    expect(
+      filterSearchSuggestions({ query: "installation", items: sampleItems }),
+    ).toEqual([
+      {
+        id: "1",
+        label: "Installation",
+        href: "/preview/installation",
+        keywords: ["npm", "setup"],
+      },
     ]);
   });
 
   it("matches keywords", () => {
-    expect(filterSearchSuggestions({ query: "github", items: sampleItems })).toEqual([
-      { id: "3", label: "GitHub", href: "https://example.com/repo", keywords: ["github", "source"] },
+    expect(
+      filterSearchSuggestions({ query: "github", items: sampleItems }),
+    ).toEqual([
+      {
+        id: "3",
+        label: "GitHub",
+        href: "https://example.com/repo",
+        keywords: ["github", "source"],
+      },
     ]);
   });
 
@@ -43,6 +71,12 @@ describe("filterSearchSuggestions", () => {
       href: `/x/${index}`,
       keywords: ["alpha"],
     }));
-    expect(filterSearchSuggestions({ query: "alpha", items: many, options: { maxResults: 5 } })).toHaveLength(5);
+    expect(
+      filterSearchSuggestions({
+        query: "alpha",
+        items: many,
+        options: { maxResults: 5 },
+      }),
+    ).toHaveLength(5);
   });
 });

package/src/ui/search/filter-search-suggestions.ts

@@ -28,9 +28,9 @@ export function filterSearchSuggestions<T extends SearchFilterable>({
   for (const item of items) {
     const isMatch =
       item.label.toLowerCase().includes(normalized) ||
-      (item.description?.toLowerCase().includes(normalized)) ||
-      (item.href?.toLowerCase().includes(normalized)) ||
-      (item.keywords?.some((k) => k.toLowerCase().includes(normalized)));
+      item.description?.toLowerCase().includes(normalized) ||
+      item.href?.toLowerCase().includes(normalized) ||
+      item.keywords?.some((k) => k.toLowerCase().includes(normalized));
 
     if (isMatch) {
       matches.push(item);

package/src/ui/search/search-bar.tsx

@@ -1,33 +1,32 @@
 "use client";
 
-import { forwardRef, useId } from "react";
+import { useId } from "react";
 
 import { cn } from "../../lib/utils";
 import { inputVariants } from "../inputs/variants";
 
 import type { SearchBarProps } from "./types";
 
-export const SearchBar = function SearchBar(
-  {
-    value,
-    onValueChange,
-    leadingSlot,
-    className,
-    inputClassName,
-    appearance = "default",
-    inputSize = "md",
-    ring = true,
-    id,
-    onChange,
-    disabled,
-    type,
-    comboboxListboxId,
-    comboboxActiveOptionId,
-    comboboxExpanded,
-    ref,
-    ...rest
-  }: SearchBarProps,
-) {
+export const SearchBar = function SearchBar({
+  value,
+  onValueChange,
+  leadingSlot,
+  className,
+  inputClassName,
+  appearance = "default",
+  inputSize = "md",
+  ring = true,
+  id,
+  onChange,
+  disabled,
+  type,
+  comboboxListboxId,
+  comboboxActiveOptionId,
+  comboboxExpanded,
+  "aria-label": ariaLabel,
+  ref,
+  ...rest
+}: SearchBarProps) {
   const generatedId = useId();
   const controlId = id ?? generatedId;
   const combobox = Boolean(comboboxListboxId);
@@ -53,6 +52,7 @@ export const SearchBar = function SearchBar(
         spellCheck={false}
         disabled={disabled}
         value={value}
+        aria-label={ariaLabel ?? (combobox ? undefined : "Search")}
         data-slot="search-bar-input"
         className={cn(
           inputVariants({ appearance, size: inputSize, ring, as: "input" }),
@@ -78,6 +78,6 @@ export const SearchBar = function SearchBar(
       />
     </div>
   );
-}
+};
 
 SearchBar.displayName = "SearchBar";

package/src/ui/search/search-suggestion-list.tsx

@@ -24,21 +24,39 @@ export function SearchSuggestionList({
     return (
       <div
         data-slot="search-suggestion-list-empty"
-        className={cn("px-1 py-6 text-center text-sm text-slate-500", className)}
+        className={cn(
+          "px-1 py-6 text-center text-sm text-slate-500",
+          className,
+        )}
       >
         {emptyLabel ?? "No matches."}
       </div>
     );
   }
 
-  let lastGroup: string | undefined;
   const useListbox = Boolean(listboxId);
 
+  const rows: Array<{
+    item: (typeof items)[number];
+    showGroup: boolean;
+  }> = [];
+  let lastGroupSeen: string | undefined;
+  for (const item of items) {
+    const showGroup = Boolean(item.group && item.group !== lastGroupSeen);
+    if (item.group) {
+      lastGroupSeen = item.group;
+    }
+    rows.push({ item, showGroup });
+  }
+
   return (
     <nav
       data-slot="search-suggestion-list"
       aria-label="Search results"
-      className={cn("flex max-h-[min(50vh,360px)] flex-col gap-1 overflow-y-auto pr-1", className)}
+      className={cn(
+        "flex max-h-[min(50vh,360px)] flex-col gap-1 overflow-y-auto pr-1",
+        className,
+      )}
     >
       <div
         {...(useListbox
@@ -49,14 +67,12 @@ export function SearchSuggestionList({
           : {})}
         className={cn("flex flex-col gap-0.5", listClassName)}
       >
-        {items.map((item) => {
-          const showGroup = item.group && item.group !== lastGroup;
-          if (item.group) {
-            lastGroup = item.group;
-          }
+        {rows.map(({ item, showGroup }) => {
           const isActive = activeId === item.id;
           const optionDomId =
-            useListbox && listboxId ? searchSuggestionOptionDomId(listboxId, item.id) : undefined;
+            useListbox && listboxId
+              ? searchSuggestionOptionDomId(listboxId, item.id)
+              : undefined;
           return (
             <Fragment key={item.id}>
               {showGroup ? (
@@ -80,7 +96,9 @@ export function SearchSuggestionList({
               >
                 <span className="font-medium text-slate-100">{item.label}</span>
                 {item.description ? (
-                  <span className="truncate text-xs text-slate-500">{item.description}</span>
+                  <span className="truncate text-xs text-slate-500">
+                    {item.description}
+                  </span>
                 ) : null}
               </button>
             </Fragment>
@@ -92,4 +110,3 @@ export function SearchSuggestionList({
 }
 
 SearchSuggestionList.displayName = "SearchSuggestionList";
-

package/src/ui/search/search-suggestion-utils.ts

@@ -2,7 +2,10 @@
  * Builds a stable DOM id for a listbox option so `aria-activedescendant` on the combobox
  * input can reference it. Safe for href-like `itemId` strings.
  */
-export function searchSuggestionOptionDomId(listboxId: string, itemId: string): string {
+export function searchSuggestionOptionDomId(
+  listboxId: string,
+  itemId: string,
+): string {
   const safe = itemId.replace(/[^a-zA-Z0-9_-]/g, "_");
   return `${listboxId}_opt_${safe}`;
 }

package/src/ui/select/select.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useState, useEffect, useCallback, useRef } from "react";
+import { useState, useEffect, useCallback, useRef, useId } from "react";
 import {
   SelectProps,
   SelectOption,
@@ -32,6 +32,7 @@ export const Select = ({
   onChange,
   multiple = true,
 }: SelectProps) => {
+  const listboxId = `${useId()}-listbox`;
   const [internal, setInternal] = useState<string[]>(defaultValue);
   const [open, setOpen] = useState(false);
   const [options, setOptions] = useState<SelectOption[]>([]);
@@ -97,6 +98,7 @@ export const Select = ({
         registerOption,
         options,
         multiple,
+        listboxId,
       }}
     >
       <div ref={rootRef} className="relative w-full">
@@ -110,16 +112,25 @@ export const SelectTrigger = ({
   className,
   variant,
   size,
+  onClick,
   ...props
 }: SelectTriggerProps) => {
-  const { open, setOpen } = useSelect();
+  const { open, setOpen, listboxId } = useSelect();
 
   return (
     <button
       type="button"
-      onClick={() => setOpen(!open)}
+      aria-expanded={open}
+      aria-haspopup="listbox"
+      aria-controls={listboxId}
       className={cn(selectTriggerVariants({ variant, size }), className)}
       {...props}
+      onClick={(event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) {
+          setOpen(!open);
+        }
+      }}
     />
   );
 };
@@ -161,12 +172,84 @@ export const SelectContent = ({
   spacing = "default",
   ...props
 }: SelectContentProps) => {
-  const { open } = useSelect();
+  const { open, listboxId, multiple } = useSelect();
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const panel = panelRef.current;
+    if (!panel) {
+      return;
+    }
+    const opts = Array.from(
+      panel.querySelectorAll<HTMLElement>('[role="option"]'),
+    ).filter((el) => el.getAttribute("aria-disabled") !== "true");
+    requestAnimationFrame(() => opts[0]?.focus());
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const panel = panelRef.current;
+    if (!panel) {
+      return;
+    }
+
+    const enabledOptions = () =>
+      Array.from(panel.querySelectorAll<HTMLElement>('[role="option"]')).filter(
+        (el) => el.getAttribute("aria-disabled") !== "true",
+      );
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const options = enabledOptions();
+      if (options.length === 0) {
+        return;
+      }
+
+      const idx = options.findIndex((el) => el === document.activeElement);
+
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        const next = idx < 0 ? 0 : Math.min(idx + 1, options.length - 1);
+        options[next]?.focus();
+        return;
+      }
+
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        const prev = idx <= 0 ? options.length - 1 : Math.max(idx - 1, 0);
+        options[prev]?.focus();
+        return;
+      }
+
+      if (event.key === "Home") {
+        event.preventDefault();
+        options[0]?.focus();
+        return;
+      }
+
+      if (event.key === "End") {
+        event.preventDefault();
+        options[options.length - 1]?.focus();
+      }
+    };
+
+    panel.addEventListener("keydown", handleKeyDown);
+    return () => panel.removeEventListener("keydown", handleKeyDown);
+  }, [open]);
 
   if (!open) return null;
 
   return (
     <div
+      ref={panelRef}
+      id={listboxId}
+      role="listbox"
+      aria-multiselectable={multiple}
+      tabIndex={-1}
       className={cn(
         selectContentVariants({ appearance, size, spacing }),
         className,
@@ -198,10 +281,17 @@ export const SelectItem = ({
     <div
       role="option"
       aria-selected={isActive}
-      tabIndex={0}
+      aria-disabled={disabled ? true : undefined}
+      tabIndex={-1}
       onClick={() => !disabled && toggleValue(value)}
       onKeyDown={(e) => {
-        if (e.key === "Enter") toggleValue(value);
+        if (disabled) {
+          return;
+        }
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          toggleValue(value);
+        }
       }}
       data-selected={isActive ? "true" : "false"}
       className={cn(

package/src/ui/select/types.ts

@@ -40,6 +40,7 @@ export type SelectContextType = {
   registerOption: (option: SelectOption) => void;
   options: SelectOption[];
   multiple: boolean;
+  listboxId: string;
 };
 
 export type SelectProps = {