@zentauri-ui/zentauri-components 1.4.5 → 1.4.7

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

@@ -0,0 +1,32 @@
+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,32 @@
+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,56 @@
+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";

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

@@ -0,0 +1,27 @@
+import { forwardRef } from "react";
+
+import { cn } from "../../lib/utils";
+
+import type { InlineCodeProps } from "./types";
+import { typographyToneVariants } from "./variants";
+
+export const InlineCodeBase = (props: InlineCodeProps) => {
+  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>
+  );
+};
+
+InlineCodeBase.displayName = "InlineCode";

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

@@ -0,0 +1,8 @@
+import { InlineCodeBase } from "./inline-code-base";
+import type { InlineCodeProps } from "./types";
+
+export const InlineCode = (props: InlineCodeProps) => {
+  return <InlineCodeBase {...props} />;
+};
+
+InlineCode.displayName = "InlineCode";

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

@@ -0,0 +1,80 @@
+import { cn } from "../../lib/utils";
+
+import type { ListProps, ListItemProps } from "./types";
+import {
+  orderedListVariants,
+  typographyToneVariants,
+  unorderedListMarkerVariants,
+} from "./variants";
+
+export function ListBase(props: ListProps) {
+  if ("ordered" in props && props.ordered === true) {
+    const { tone, className, children, ref, ordered, marker, ...rest } = props;
+
+    void ordered;
+    void marker;
+
+    return (
+      <ol
+        ref={ref}
+        data-slot="typography-list"
+        data-list-type="ordered"
+        className={cn(
+          typographyToneVariants({ tone }),
+          orderedListVariants(),
+          className,
+        )}
+        {...rest}
+      >
+        {children}
+      </ol>
+    );
+  }
+
+  const {
+    marker = "disc",
+    tone,
+    className,
+    children,
+    ref,
+    ordered,
+    ...rest
+  } = props;
+
+  void ordered;
+
+  return (
+    <ul
+      ref={ref}
+      data-slot="typography-list"
+      data-list-type="unordered"
+      className={cn(
+        typographyToneVariants({ tone }),
+        unorderedListMarkerVariants({ marker }),
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </ul>
+  );
+}
+
+ListBase.displayName = "List";
+
+export function ListItemBase(props: ListItemProps) {
+  const { className, children, ref, ...rest } = props;
+
+  return (
+    <li
+      ref={ref}
+      data-slot="typography-list-item"
+      className={cn("leading-relaxed", className)}
+      {...rest}
+    >
+      {children}
+    </li>
+  );
+}
+
+ListItemBase.displayName = "ListItem";