@zentauri-ui/zentauri-components 1.4.61 → 1.4.63

package/src/ui/toggle/animated/types.ts

@@ -3,11 +3,13 @@ import type { ToggleProps } from "../types";
 
 export type ToggleAnimation = "none" | "spring";
 
-export type ToggleThumbPreset = Pick<HTMLMotionProps<"span">, "transition" | "layout">;
+export type ToggleThumbPreset = Pick<
+  HTMLMotionProps<"span">,
+  "transition" | "layout"
+>;
 
 export type ToggleAnimationPresets = Record<ToggleAnimation, ToggleThumbPreset>;
 
-
 export type ToggleAnimatedProps = ToggleProps & {
   animation?: ToggleAnimation;
 };

package/src/ui/toggle/index.ts

@@ -1,5 +1,9 @@
 "use client";
 
 export { Toggle } from "./toggle";
-export type { ToggleProps, ToggleTrackVariantProps, ToggleThumbVariantProps } from "./types";
+export type {
+  ToggleProps,
+  ToggleTrackVariantProps,
+  ToggleThumbVariantProps,
+} from "./types";
 export { toggleThumbVariants, toggleTrackVariants } from "./variants";

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,14 @@ 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 +72,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 +83,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/animated/animations.ts

@@ -1,6 +1,5 @@
 import type { TooltipAnimationPresets } from "./types";
 
-
 export const tooltipAnimationPresets: TooltipAnimationPresets = {
   none: {},
   fade: {

package/src/ui/tooltip/animated/types.ts

@@ -13,7 +13,6 @@ export type TooltipAnimationPresets = Record<
   TooltipPresetMotionProps
 >;
 
-
 export type TooltipContentAnimatedProps = TooltipContentProps & {
   animation?: TooltipAnimation;
 };

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,102 @@ 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 +220,7 @@ export const TooltipContent = ({
   size,
   width,
 }: TooltipContentProps) => {
-  const { open, position } = useTooltip();
+  const { open, position, tooltipId } = useTooltip();
 
   if (!open) return null;
 
@@ -138,6 +233,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,33 +9,31 @@ 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",
         green: "bg-green-600 text-white",
         "gradient-blue":
-          "bg-gradient-to-r from-blue-600 to-purple-600 text-white",
+          "bg-linear-to-r from-blue-600 to-purple-600 text-white",
         "gradient-green":
-          "bg-gradient-to-r from-green-600 to-lime-600 text-white",
-        "gradient-red": "bg-gradient-to-r from-red-600 to-pink-600 text-white",
+          "bg-linear-to-r from-green-600 to-lime-600 text-white",
+        "gradient-red": "bg-linear-to-r from-red-600 to-pink-600 text-white",
         "gradient-yellow":
-          "bg-gradient-to-r from-yellow-600 to-orange-600 text-white",
+          "bg-linear-to-r from-yellow-600 to-orange-600 text-white",
         "gradient-purple":
-          "bg-gradient-to-r from-purple-600 to-pink-600 text-white",
-        "gradient-teal":
-          "bg-gradient-to-r from-teal-600 to-cyan-600 text-white",
+          "bg-linear-to-r from-purple-600 to-pink-600 text-white",
+        "gradient-teal": "bg-linear-to-r from-teal-600 to-cyan-600 text-white",
         "gradient-indigo":
-          "bg-gradient-to-r from-indigo-600 to-purple-600 text-white",
-        "gradient-pink":
-          "bg-gradient-to-r from-pink-600 to-rose-600 text-white",
+          "bg-linear-to-r from-indigo-600 to-purple-600 text-white",
+        "gradient-pink": "bg-linear-to-r from-pink-600 to-rose-600 text-white",
         "gradient-orange":
-          "bg-gradient-to-r from-orange-600 to-red-600 text-white",
+          "bg-linear-to-r from-orange-600 to-red-600 text-white",
       },
       size: {
         sm: "text-xs px-2 py-1",

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

@@ -6,14 +6,7 @@ import type { BlockquoteProps } from "./types";
 import { typographyToneVariants } from "./variants";
 
 export const BlockquoteBase = (props: BlockquoteProps) => {
-  const {
-    tone,
-    attribution,
-    className,
-    children,
-    ref,
-    ...rest
-  } = props;
+  const { tone, attribution, className, children, ref, ...rest } = props;
 
   return (
     <blockquote

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

@@ -6,32 +6,27 @@ import type { CodeBlockProps } from "./types";
 import { typographyToneVariants } from "./variants";
 
 export const CodeBlockBase = (props: CodeBlockProps) => {
-    const {
-      tone,
-      language,
-      className,
-      children,
-      ref,
-      ...rest
-    } = props;
+  const { tone, language, className, children, ref, ...rest } = props;
 
-    const ariaLabel = language ? `Code sample (${language})` : "Code sample";
+  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>
-    );
+  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/heading-base.tsx

@@ -3,10 +3,7 @@ import { forwardRef } from "react";
 import { cn } from "../../lib/utils";
 
 import type { HeadingProps } from "./types";
-import {
-  headingLevelVariants,
-  typographyToneVariants,
-} from "./variants";
+import { headingLevelVariants, typographyToneVariants } from "./variants";
 
 const HEADING_TAGS = {
   1: "h1",
@@ -18,42 +15,42 @@ const HEADING_TAGS = {
 } as const;
 
 export const HeadingBase = (props: HeadingProps) => {
-    const {
-      level,
-      displayLevel,
-      tone,
-      bold,
-      italic,
-      underline,
-      strikethrough,
-      ref,
-      className,
-      children,
-      ...rest
-    } = props;
+  const {
+    level,
+    displayLevel,
+    tone,
+    bold,
+    italic,
+    underline,
+    strikethrough,
+    ref,
+    className,
+    children,
+    ...rest
+  } = props;
 
-    const Tag = HEADING_TAGS[level];
-    const scale = displayLevel ?? level;
+  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>
-    );
+  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/inline-code-base.tsx

@@ -6,22 +6,22 @@ import type { InlineCodeProps } from "./types";
 import { typographyToneVariants } from "./variants";
 
 export const InlineCodeBase = (props: InlineCodeProps) => {
-    const { tone, className, children, ref, ...rest } = props;
+  const { tone, className, children, ref, ...rest } = props;
 
-    return (
-      <code
-        ref={ref}
-        data-slot="typography-inline-code"
-        className={cn(
-          typographyToneVariants({ tone }),
-          "rounded-md border border-white/10 bg-white/6 px-1.5 py-0.5 font-mono text-[0.925em] font-normal",
-          className,
-        )}
-        {...rest}
-      >
-        {children}
-      </code>
-    );
+  return (
+    <code
+      ref={ref}
+      data-slot="typography-inline-code"
+      className={cn(
+        typographyToneVariants({ tone }),
+        "rounded-md border border-white/10 bg-white/6 px-1.5 py-0.5 font-mono text-[0.925em] font-normal",
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </code>
+  );
 };
 
 InlineCodeBase.displayName = "InlineCode";

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

@@ -9,15 +9,7 @@ import {
 
 export function ListBase(props: ListProps) {
   if ("ordered" in props && props.ordered === true) {
-    const {
-      tone,
-      className,
-      children,
-      ref,
-      ordered,
-      marker,
-      ...rest
-    } = props;
+    const { tone, className, children, ref, ordered, marker, ...rest } = props;
 
     void ordered;
     void marker;

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

@@ -4,40 +4,40 @@ import type { TextProps } from "./types";
 import { textSizeVariants, typographyToneVariants } from "./variants";
 
 export const TextBase = (props: TextProps) => {
-    const {
-      as = "p",
-      size = "base",
-      tone,
-      bold,
-      italic,
-      underline,
-      strikethrough,
-      highlight,
-      className,
-      children,
-      ...rest
-    } = props;
+  const {
+    as = "p",
+    size = "base",
+    tone,
+    bold,
+    italic,
+    underline,
+    strikethrough,
+    highlight,
+    className,
+    children,
+    ...rest
+  } = props;
 
-    const Component = as;
+  const Component = as;
 
-    return (
-      <Component
-        data-slot="typography-text"
-        className={cn(
-          typographyToneVariants({ tone }),
-          textSizeVariants({ size }),
-          bold && "font-semibold",
-          italic && "italic",
-          underline && "underline underline-offset-2",
-          strikethrough && "line-through",
-          highlight && "rounded bg-amber-400/15 px-0.5",
-          className,
-        )}
-        {...rest}
-      >
-        {children}
-      </Component>
-    );
+  return (
+    <Component
+      data-slot="typography-text"
+      className={cn(
+        typographyToneVariants({ tone }),
+        textSizeVariants({ size }),
+        bold && "font-semibold",
+        italic && "italic",
+        underline && "underline underline-offset-2",
+        strikethrough && "line-through",
+        highlight && "rounded bg-amber-400/15 px-0.5",
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </Component>
+  );
 };
 
 TextBase.displayName = "Text";