@zentauri-ui/zentauri-components 1.4.51 → 1.4.62

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

@@ -5,6 +5,7 @@ import {
   KeyboardEvent,
   useContext,
   useId,
+  useRef,
   useState,
 } from "react";
 
@@ -41,6 +42,7 @@ export function Tabs({
 }: TabsProps) {
   const [internalValue, setInternalValue] = useState(defaultValue);
   const idPrefix = useId();
+  const listRef = useRef<HTMLDivElement | null>(null);
 
   const isControlled = value !== undefined;
   const currentValue = isControlled ? value : internalValue;
@@ -60,6 +62,7 @@ export function Tabs({
       value={{
         value: currentValue,
         setValue,
+        listRef,
         orientation,
         size,
         variant,
@@ -76,10 +79,11 @@ export function Tabs({
 }
 
 export function TabsList({ children, className, ...props }: TabsListProps) {
-  const { orientation, size } = useTabs();
+  const { orientation, size, listRef } = useTabs();
 
   return (
     <div
+      ref={listRef}
       role="tablist"
       aria-orientation={orientation}
       className={cn(tabsListVariants({ orientation, size }), className)}
@@ -100,6 +104,8 @@ export function TabsTrigger({
   const {
     value: activeValue,
     setValue,
+    listRef,
+    orientation,
     tabTriggerId,
     tabPanelId,
     size,
@@ -110,30 +116,84 @@ export function TabsTrigger({
   const isActive = activeValue === value;
 
   const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
-    const triggers = Array.from(
-      document.querySelectorAll('[role="tab"]'),
-    ) as HTMLElement[];
+    const list = listRef.current;
+    const triggers =
+      list === null
+        ? []
+        : Array.from(list.querySelectorAll<HTMLButtonElement>('[role="tab"]'));
+
+    const nextKeys =
+      orientation === "vertical" ? ["ArrowDown"] : ["ArrowRight"];
+    const prevKeys = orientation === "vertical" ? ["ArrowUp"] : ["ArrowLeft"];
 
     const index = triggers.findIndex((el) => el === e.currentTarget);
+    if (index === -1) {
+      return;
+    }
 
-    if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+    const findEnabledIndex = (
+      start: number,
+      direction: 1 | -1,
+    ): number | undefined => {
+      const n = triggers.length;
+      if (n === 0) {
+        return undefined;
+      }
+      let i = start;
+      for (let step = 0; step < n; step += 1) {
+        i = (i + direction + n) % n;
+        if (triggers[i]?.disabled !== true) {
+          return i;
+        }
+      }
+      return undefined;
+    };
+
+    const focusAt = (i: number) => {
+      const target = triggers[i];
+      if (target !== undefined && target.disabled !== true) {
+        target.focus();
+      }
+    };
+
+    const isNext = nextKeys.includes(e.key);
+    const isPrev = prevKeys.includes(e.key);
+
+    if (isNext) {
       e.preventDefault();
-      triggers[index + 1]?.focus();
+      const nextIdx = findEnabledIndex(index, 1);
+      if (nextIdx !== undefined) {
+        focusAt(nextIdx);
+      }
+      return;
     }
 
-    if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+    if (isPrev) {
       e.preventDefault();
-      triggers[index - 1]?.focus();
+      const prevIdx = findEnabledIndex(index, -1);
+      if (prevIdx !== undefined) {
+        focusAt(prevIdx);
+      }
+      return;
     }
 
     if (e.key === "Home") {
       e.preventDefault();
-      triggers[0]?.focus();
+      const firstEnabledIndex = triggers.findIndex((btn) => !btn.disabled);
+      if (firstEnabledIndex !== -1) {
+        triggers[firstEnabledIndex]?.focus();
+      }
+      return;
     }
 
     if (e.key === "End") {
       e.preventDefault();
-      triggers[triggers.length - 1]?.focus();
+      for (let i = triggers.length - 1; i >= 0; i -= 1) {
+        if (!triggers[i]?.disabled) {
+          triggers[i]?.focus();
+          break;
+        }
+      }
     }
   };
 
@@ -146,6 +206,7 @@ export function TabsTrigger({
       aria-selected={isActive}
       aria-controls={tabPanelId(value)}
       disabled={disabled}
+      tabIndex={activeValue === undefined ? undefined : isActive ? 0 : -1}
       onClick={() => setValue(value)}
       onKeyDown={handleKeyDown}
       className={cn(

package/src/ui/tabs/types.ts

@@ -1,4 +1,4 @@
-import type { ElementType, HTMLAttributes, ReactNode } from "react";
+import type { ElementType, HTMLAttributes, ReactNode, RefObject } from "react";
 
 export type TabsValue = string;
 
@@ -59,6 +59,7 @@ export type TabsContentProps = {
 export type TabsContextType = {
   value: TabsValue | undefined;
   setValue: (value: TabsValue) => void;
+  listRef: RefObject<HTMLDivElement | null>;
   orientation: "horizontal" | "vertical";
   size?: "sm" | "md" | "lg";
   variant?: "default" | "underline" | "pills";

package/src/ui/tabs/variants.ts

@@ -24,7 +24,7 @@ export const tabsListVariants = cva("flex items-center gap-1", {
 });
 
 export const tabsTriggerVariants = cva(
-  "px-3 py-1.5 rounded-md transition-all focus:outline-none focus:ring-2 focus:ring-ring",
+  "px-3 py-1.5 rounded-md transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
   {
     variants: {
       appearance: {

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

@@ -217,7 +217,7 @@ export function ToastClose({
       data-slot="toast-close"
       aria-label="Dismiss notification"
       className={cn(
-        "absolute right-3 top-3 inline-flex size-8 items-center justify-center rounded-md text-slate-200 transition hover:bg-white/10",
+        "absolute right-3 top-3 inline-flex size-8 items-center justify-center rounded-md text-slate-200 transition hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950",
         className,
       )}
       onClick={onClick}

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

@@ -1,12 +1,31 @@
 "use client";
 
-import { useCallback, useState } from "react";
+import { useCallback, useId, useState, type ReactNode } from "react";
 
 import { cn } from "../../lib/utils";
 
 import type { ToggleProps } from "./types";
 import { toggleThumbVariants, toggleTrackVariants } from "./variants";
 
+function hasToggleLabelChildren(node: ReactNode): boolean {
+  if (node === undefined || node === null) {
+    return false;
+  }
+  if (typeof node === "boolean") {
+    return false;
+  }
+  if (typeof node === "string") {
+    return node.trim().length > 0;
+  }
+  if (typeof node === "number") {
+    return true;
+  }
+  if (Array.isArray(node)) {
+    return node.some(hasToggleLabelChildren);
+  }
+  return true;
+}
+
 export function ToggleBase(props: ToggleProps) {
   const {
     className,
@@ -17,10 +36,11 @@ export function ToggleBase(props: ToggleProps) {
     onCheckedChange,
     disabled,
     ref,
-    "aria-label": ariaLabel = "Toggle",
+    "aria-label": ariaLabelProp,
     children,
     ...rest
   } = props;
+  const toggleLabelId = useId();
   const isControlled = checked !== undefined;
   const [uncontrolled, setUncontrolled] = useState(defaultChecked);
   const resolved = isControlled ? Boolean(checked) : uncontrolled;
@@ -36,6 +56,15 @@ export function ToggleBase(props: ToggleProps) {
   );
 
   const thumbShiftPx = size === "sm" ? 14 : size === "lg" ? 26 : 20;
+  const labeledByChildren = hasToggleLabelChildren(children);
+  const labeling =
+    labeledByChildren ?
+      {
+        "aria-labelledby": toggleLabelId,
+      }
+    : {
+        "aria-label": ariaLabelProp ?? "Toggle",
+      };
 
   return (
     <button
@@ -44,10 +73,10 @@ export function ToggleBase(props: ToggleProps) {
       role="switch"
       data-slot="toggle"
       aria-checked={resolved}
-      aria-label={ariaLabel}
       data-state={resolved ? "checked" : "unchecked"}
       disabled={disabled}
       className={cn(toggleTrackVariants({ size, appearance }), className)}
+      {...labeling}
       onClick={() => {
         if (!disabled) {
           setChecked(!resolved);
@@ -55,7 +84,11 @@ export function ToggleBase(props: ToggleProps) {
       }}
       {...rest}
     >
-      <span className="sr-only">{children}</span>
+      {labeledByChildren ?
+        <span id={toggleLabelId} className="sr-only">
+          {children}
+        </span>
+      : null}
       <span
         className={cn(
           toggleThumbVariants({ size }),

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

@@ -1,12 +1,20 @@
 "use client";
 
 import {
+  Children,
+  cloneElement,
   createContext,
+  isValidElement,
   useCallback,
   useContext,
   useEffect,
+  useId,
   useRef,
   useState,
+  type KeyboardEventHandler,
+  type MouseEventHandler,
+  type FocusEventHandler,
+  type ReactElement,
 } from "react";
 
 import { cn } from "../../lib/utils";
@@ -29,6 +37,22 @@ export const useTooltip = () => {
   return context;
 };
 
+function mergeDescribedBy(
+  tooltipId: string,
+  existing: unknown,
+  open: boolean,
+): string | undefined {
+  if (!open) {
+    return typeof existing === "string" ? existing : undefined;
+  }
+  const baseIds =
+    typeof existing === "string" && existing.trim().length > 0
+      ? existing.split(/\s+/).filter(Boolean)
+      : [];
+  const merged = [...new Set([...baseIds, tooltipId])];
+  return merged.join(" ");
+}
+
 export const Tooltip = ({
   children,
   defaultOpen = false,
@@ -38,6 +62,7 @@ export const Tooltip = ({
   delay = 100,
 }: TooltipProps) => {
   const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const tooltipId = `${useId()}-tooltip`;
 
   const isControlled = controlledOpen !== undefined;
   const open = isControlled ? controlledOpen : uncontrolledOpen;
@@ -78,6 +103,7 @@ export const Tooltip = ({
         delay,
         scheduleDelayedOpen,
         cancelDelayedOpen,
+        tooltipId,
       }}
     >
       <div className="relative inline-block">{children}</div>
@@ -89,33 +115,103 @@ export const TooltipTrigger = ({
   children,
   className,
 }: TooltipTriggerProps) => {
-  const { setOpen, scheduleDelayedOpen, cancelDelayedOpen } = useTooltip();
+  const { setOpen, scheduleDelayedOpen, cancelDelayedOpen, open, tooltipId } =
+    useTooltip();
 
-  const triggerProps = {
-    onMouseEnter: () => scheduleDelayedOpen(),
-    onMouseLeave: () => {
-      cancelDelayedOpen();
-      setOpen(false);
-    },
-    onFocus: () => {
-      cancelDelayedOpen();
-      setOpen(true);
-    },
-    onBlur: () => {
+  const onMouseEnter: MouseEventHandler = () => scheduleDelayedOpen();
+  const onMouseLeave: MouseEventHandler = () => {
+    cancelDelayedOpen();
+    setOpen(false);
+  };
+  const onFocus: FocusEventHandler = () => {
+    cancelDelayedOpen();
+    setOpen(true);
+  };
+  const onBlur: FocusEventHandler = () => {
+    cancelDelayedOpen();
+    setOpen(false);
+  };
+  const onKeyDown: KeyboardEventHandler = (event) => {
+    if (event.key === "Escape") {
       cancelDelayedOpen();
       setOpen(false);
-    },
-    onKeyDown: (e: React.KeyboardEvent) => {
-      if (e.key === "Escape") {
+    }
+  };
+
+  const childList = Children.toArray(children).filter(
+    (node) =>
+      node !== null && node !== undefined && typeof node !== "boolean",
+  );
+
+  const soleCandidate =
+    childList.length === 1 && isValidElement(childList[0])
+      ? (childList[0] as ReactElement<{
+          className?: string;
+          "aria-describedby"?: string;
+          onMouseEnter?: MouseEventHandler;
+          onMouseLeave?: MouseEventHandler;
+          onFocus?: FocusEventHandler;
+          onBlur?: FocusEventHandler;
+          onKeyDown?: KeyboardEventHandler;
+        }>)
+      : undefined;
+
+  if (soleCandidate) {
+    const describedBy = mergeDescribedBy(
+      tooltipId,
+      soleCandidate.props["aria-describedby"],
+      open,
+    );
+    return cloneElement(soleCandidate, {
+      onMouseEnter: (event: React.MouseEvent) => {
+        soleCandidate.props.onMouseEnter?.(event);
+        if (!event.defaultPrevented) {
+          scheduleDelayedOpen();
+        }
+      },
+      onMouseLeave: (event: React.MouseEvent) => {
+        soleCandidate.props.onMouseLeave?.(event);
         cancelDelayedOpen();
         setOpen(false);
-      }
-    },
-    className,
-    tabIndex: 0,
-  };
+      },
+      onFocus: (event: React.FocusEvent) => {
+        soleCandidate.props.onFocus?.(event);
+        if (!event.defaultPrevented) {
+          cancelDelayedOpen();
+          setOpen(true);
+        }
+      },
+      onBlur: (event: React.FocusEvent) => {
+        soleCandidate.props.onBlur?.(event);
+        cancelDelayedOpen();
+        setOpen(false);
+      },
+      onKeyDown: (event: React.KeyboardEvent) => {
+        soleCandidate.props.onKeyDown?.(event);
+        if (event.key === "Escape") {
+          cancelDelayedOpen();
+          setOpen(false);
+        }
+      },
+      className: cn(className, soleCandidate.props.className),
+      "aria-describedby": describedBy,
+    });
+  }
 
-  return <span {...triggerProps}>{children}</span>;
+  return (
+    <span
+      className={className}
+      tabIndex={0}
+      aria-describedby={mergeDescribedBy(tooltipId, undefined, open)}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      onKeyDown={onKeyDown}
+    >
+      {children}
+    </span>
+  );
 };
 
 export const TooltipContent = ({
@@ -125,7 +221,7 @@ export const TooltipContent = ({
   size,
   width,
 }: TooltipContentProps) => {
-  const { open, position } = useTooltip();
+  const { open, position, tooltipId } = useTooltip();
 
   if (!open) return null;
 
@@ -138,6 +234,7 @@ export const TooltipContent = ({
 
   return (
     <div
+      id={tooltipId}
       data-open={open}
       role="tooltip"
       className={cn(

package/src/ui/tooltip/types.ts

@@ -9,6 +9,7 @@ export type TooltipContextType = {
   delay: number;
   scheduleDelayedOpen: () => void;
   cancelDelayedOpen: () => void;
+  tooltipId: string;
 };
 
 export type TooltipProps = {

package/src/ui/tooltip/variants.ts

@@ -9,12 +9,12 @@ export const tooltipVariants = cva(
         outline: "border bg-white text-black",
         ghost: "bg-gray-800 text-white/90",
         glass: "border border-white/15 bg-white/10 text-white backdrop-blur-md",
-        emerald: "bg-emerald-600 text-white",
+        emerald: "bg-emerald-800 text-white",
         indigo: "bg-indigo-600 text-white",
         purple: "bg-purple-600 text-white",
         pink: "bg-pink-600 text-white",
         rose: "bg-rose-600 text-white",
-        sky: "bg-sky-600 text-white",
+        sky: "bg-sky-700 text-white",
         teal: "bg-teal-600 text-white",
         yellow: "bg-yellow-600 text-white",
         orange: "bg-orange-600 text-white",

package/src/ui/typography/blockquote-base.tsx

@@ -0,0 +1,39 @@
+import { forwardRef } from "react";
+
+import { cn } from "../../lib/utils";
+
+import type { BlockquoteProps } from "./types";
+import { typographyToneVariants } from "./variants";
+
+export const BlockquoteBase = (props: BlockquoteProps) => {
+  const {
+    tone,
+    attribution,
+    className,
+    children,
+    ref,
+    ...rest
+  } = props;
+
+  return (
+    <blockquote
+      ref={ref}
+      data-slot="typography-blockquote"
+      className={cn(
+        typographyToneVariants({ tone }),
+        "border-l-4 py-1 pl-4 italic",
+        className,
+      )}
+      {...rest}
+    >
+      <div className="space-y-2 leading-relaxed">{children}</div>
+      {attribution ? (
+        <footer className="mt-3 text-sm not-italic">
+          <cite>{attribution}</cite>
+        </footer>
+      ) : null}
+    </blockquote>
+  );
+};
+
+BlockquoteBase.displayName = "Blockquote";

package/src/ui/typography/blockquote.tsx

@@ -0,0 +1,8 @@
+import { BlockquoteBase } from "./blockquote-base";
+import type { BlockquoteProps } from "./types";
+
+export const Blockquote = (props: BlockquoteProps) => {
+  return <BlockquoteBase {...props} />;
+};
+
+Blockquote.displayName = "Blockquote";

package/src/ui/typography/code-block-base.tsx

@@ -0,0 +1,37 @@
+import { forwardRef } from "react";
+
+import { cn } from "../../lib/utils";
+
+import type { CodeBlockProps } from "./types";
+import { typographyToneVariants } from "./variants";
+
+export const CodeBlockBase = (props: CodeBlockProps) => {
+    const {
+      tone,
+      language,
+      className,
+      children,
+      ref,
+      ...rest
+    } = props;
+
+    const ariaLabel = language ? `Code sample (${language})` : "Code sample";
+
+    return (
+      <pre
+        ref={ref}
+        data-slot="typography-code-block"
+        aria-label={ariaLabel}
+        className={cn(
+          typographyToneVariants({ tone }),
+          "overflow-x-auto rounded-xl border border-white/10 bg-slate-950/80 p-4 text-sm leading-relaxed shadow-inner shadow-slate-950/40",
+          className,
+        )}
+        {...rest}
+      >
+        <code className="font-mono text-[0.95em] whitespace-pre-wrap wrap-break-word">{children}</code>
+      </pre>
+    );
+};
+
+CodeBlockBase.displayName = "CodeBlock";

package/src/ui/typography/code-block.tsx

@@ -0,0 +1,8 @@
+import { CodeBlockBase } from "./code-block-base";
+import type { CodeBlockProps } from "./types";
+
+export const CodeBlock = (props: CodeBlockProps) => {
+  return <CodeBlockBase {...props} />;
+};
+
+CodeBlock.displayName = "CodeBlock";

package/src/ui/typography/heading-base.tsx

@@ -0,0 +1,59 @@
+import { forwardRef } from "react";
+
+import { cn } from "../../lib/utils";
+
+import type { HeadingProps } from "./types";
+import {
+  headingLevelVariants,
+  typographyToneVariants,
+} from "./variants";
+
+const HEADING_TAGS = {
+  1: "h1",
+  2: "h2",
+  3: "h3",
+  4: "h4",
+  5: "h5",
+  6: "h6",
+} as const;
+
+export const HeadingBase = (props: HeadingProps) => {
+    const {
+      level,
+      displayLevel,
+      tone,
+      bold,
+      italic,
+      underline,
+      strikethrough,
+      ref,
+      className,
+      children,
+      ...rest
+    } = props;
+
+    const Tag = HEADING_TAGS[level];
+    const scale = displayLevel ?? level;
+
+    return (
+      <Tag
+        ref={ref}
+        data-slot="typography-heading"
+        data-level={level}
+        className={cn(
+          typographyToneVariants({ tone }),
+          headingLevelVariants({ level: scale }),
+          bold && "font-bold",
+          italic && "italic",
+          underline && "underline underline-offset-4",
+          strikethrough && "line-through",
+          className,
+        )}
+        {...rest}
+      >
+        {children}
+      </Tag>
+    );
+};
+
+HeadingBase.displayName = "Heading";

package/src/ui/typography/heading.tsx

@@ -0,0 +1,8 @@
+import { HeadingBase } from "./heading-base";
+import type { HeadingProps } from "./types";
+
+export const Heading = (props: HeadingProps) => {
+  return <HeadingBase {...props} />;
+};
+
+Heading.displayName = "Heading";

package/src/ui/typography/index.ts

@@ -0,0 +1,28 @@
+export { Heading } from "./heading";
+export { Text } from "./text";
+export { List, ListItem } from "./list";
+export { Blockquote } from "./blockquote";
+export { InlineCode } from "./inline-code";
+export { CodeBlock } from "./code-block";
+
+export type {
+  BlockquoteProps,
+  CodeBlockProps,
+  HeadingLevel,
+  HeadingProps,
+  InlineCodeProps,
+  ListItemProps,
+  ListProps,
+  TextElement,
+  TextProps,
+  TypographyTone,
+  UnorderedMarker,
+} from "./types";
+
+export {
+  headingLevelVariants,
+  orderedListVariants,
+  textSizeVariants,
+  typographyToneVariants,
+  unorderedListMarkerVariants,
+} from "./variants";