@vvedantb/ui 0.17.0 → 0.18.0

package/src/ui/crossfade-icon.tsx

@@ -0,0 +1,123 @@
+import type { ReactNode } from "react";
+import { m, AnimatePresence, type Transition } from "motion/react";
+
+const DEFAULT_TRANSITION: Transition = {
+  type: "spring",
+  duration: 0.3,
+  bounce: 0,
+};
+
+const SOFT_EASE: [number, number, number, number] = [0.22, 1, 0.36, 1];
+const SOFT_TRANSITION: Transition = {
+  duration: 0.15,
+  ease: SOFT_EASE,
+};
+
+const DEFAULT_ICON_MOTION = {
+  initial: { scale: 0.25, opacity: 0, filter: "blur(4px)" },
+  animate: { scale: 1, opacity: 1, filter: "blur(0px)" },
+  exit: { scale: 0.25, opacity: 0, filter: "blur(4px)" },
+  transition: DEFAULT_TRANSITION,
+};
+
+/** Near-imperceptible swap for high-frequency toggles (150ms, no blur). */
+const SOFT_ICON_MOTION = {
+  initial: { scale: 0.96, opacity: 0 },
+  animate: { scale: 1, opacity: 1 },
+  exit: { scale: 0.96, opacity: 0 },
+  transition: SOFT_TRANSITION,
+};
+
+interface CrossfadeIconProps {
+  show: boolean;
+  whenTrue: ReactNode;
+  whenFalse: ReactNode;
+  trueKey?: string;
+  falseKey?: string;
+  className?: string;
+  /** `soft` = opacity + scale(0.96→1), no blur — for tens/day toggles. */
+  variant?: "default" | "soft";
+}
+
+/** Cross-fades between two icons in the same slot. */
+export function CrossfadeIcon({
+  show,
+  whenTrue,
+  whenFalse,
+  trueKey = "on",
+  falseKey = "off",
+  className = "relative flex size-5 items-center justify-center",
+  variant = "default",
+}: CrossfadeIconProps) {
+  const motion = variant === "soft" ? SOFT_ICON_MOTION : DEFAULT_ICON_MOTION;
+
+  return (
+    <span className={className}>
+      <AnimatePresence initial={false}>
+        {show ? (
+          <m.span
+            key={trueKey}
+            className="absolute inset-0 flex items-center justify-center"
+            initial={motion.initial}
+            animate={motion.animate}
+            exit={motion.exit}
+            transition={motion.transition}
+          >
+            {whenTrue}
+          </m.span>
+        ) : (
+          <m.span
+            key={falseKey}
+            className="absolute inset-0 flex items-center justify-center"
+            initial={motion.initial}
+            animate={motion.animate}
+            exit={motion.exit}
+            transition={motion.transition}
+          >
+            {whenFalse}
+          </m.span>
+        )}
+      </AnimatePresence>
+    </span>
+  );
+}
+
+/**
+ * Cross-fades between any number of keyed icons in the same slot.
+ *
+ * `CrossfadeIcon` covers the two-state case, which is most of them. A control
+ * that cycles through three or more states (the composer's submit button:
+ * send, submitting, streaming, error) needs the key to come from the state
+ * rather than from a boolean.
+ */
+export function CrossfadeIconSlot({
+  iconKey,
+  children,
+  className = "relative flex size-4 items-center justify-center",
+  variant = "soft",
+}: {
+  /** Identity of the icon currently shown; a change triggers the swap. */
+  iconKey: string;
+  children: ReactNode;
+  className?: string;
+  variant?: "default" | "soft";
+}) {
+  const motion = variant === "soft" ? SOFT_ICON_MOTION : DEFAULT_ICON_MOTION;
+
+  return (
+    <span className={className}>
+      <AnimatePresence initial={false}>
+        <m.span
+          key={iconKey}
+          className="absolute inset-0 flex items-center justify-center"
+          initial={motion.initial}
+          animate={motion.animate}
+          exit={motion.exit}
+          transition={motion.transition}
+        >
+          {children}
+        </m.span>
+      </AnimatePresence>
+    </span>
+  );
+}

package/src/ui/dialog.tsx

@@ -11,29 +11,69 @@ import {
   treeHasDialogDescription,
   useCompactOverlay,
 } from "./overlay-a11y";
+import { useCn, useUiConfig } from "./ui-config";
+
+/** App defaults for `Dialog*` (see `UiConfigProvider`). */
+export interface DialogConfig {
+  /** Replaces the built-in classes of a part. */
+  classes?: {
+    trigger?: string;
+    overlay?: string;
+    /** Content classes shared by both layouts. */
+    content?: string;
+    /** Content layout classes for the centred dialog. */
+    centered?: string;
+    /** Content layout classes for the compact bottom sheet. */
+    compact?: string;
+    close?: string;
+    header?: string;
+    body?: string;
+    footer?: string;
+    title?: string;
+    description?: string;
+  };
+  /** Default for `DialogContent` `viewportAware`. */
+  viewportAware?: boolean;
+}
 
 const Dialog = DialogPrimitive.Root;
-const DialogTrigger = DialogPrimitive.Trigger;
 const DialogPortal = DialogPrimitive.Portal;
 const DialogClose = DialogPrimitive.Close;
 
+const DialogTrigger = React.forwardRef<
+  React.ComponentRef<typeof DialogPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>
+>((props, ref) => {
+  const trigger = useUiConfig("Dialog")?.classes?.trigger;
+  const merge = useCn();
+  // Without config, pass props untouched: Radix's Slot turns an explicit
+  // `className={undefined}` into `class=""`.
+  if (trigger === undefined) return <DialogPrimitive.Trigger ref={ref} {...props} />;
+  const { className, ...rest } = props;
+  return <DialogPrimitive.Trigger ref={ref} className={merge(trigger, className)} {...rest} />;
+});
+DialogTrigger.displayName = DialogPrimitive.Trigger.displayName;
+
 const overlayMotionClass =
   "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 motion-reduce:animate-none motion-reduce:data-[state=open]:animate-none motion-reduce:data-[state=closed]:animate-none";
 
 const DialogOverlay = React.forwardRef<
   React.ComponentRef<typeof DialogPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      "fixed inset-0 z-50 bg-backdrop backdrop-blur-md",
-      overlayMotionClass,
-      className,
-    )}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const overlay = useUiConfig("Dialog")?.classes?.overlay;
+  const merge = useCn();
+  return (
+    <DialogPrimitive.Overlay
+      ref={ref}
+      className={merge(
+        overlay ?? ["fixed inset-0 z-50 bg-backdrop backdrop-blur-md", overlayMotionClass],
+        className,
+      )}
+      {...props}
+    />
+  );
+});
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DEFAULT_ALERT_DESCRIPTION = "This action needs confirmation.";
@@ -42,6 +82,12 @@ const DialogContent = React.forwardRef<
   React.ComponentRef<typeof DialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
     hideCloseButton?: boolean;
+    /**
+     * Bottom sheet on compact viewports, visual-viewport sizing, keyboard-aware
+     * scrolling and the body pointer-events fix. Default `true`. `false` keeps a
+     * centred dialog at every size and leaves the viewport and body alone.
+     */
+    viewportAware?: boolean;
   }
 >(
   (
@@ -49,6 +95,7 @@ const DialogContent = React.forwardRef<
       className,
       children,
       hideCloseButton,
+      viewportAware: viewportAwareProp,
       role,
       onOpenAutoFocus,
       "aria-describedby": ariaDescribedBy,
@@ -56,7 +103,12 @@ const DialogContent = React.forwardRef<
     },
     ref,
   ) => {
-    const compact = useCompactOverlay();
+    const config = useUiConfig("Dialog");
+    const classes = config?.classes;
+    const merge = useCn();
+    const viewportAware = viewportAwareProp ?? config?.viewportAware ?? true;
+    const compactViewport = useCompactOverlay();
+    const compact = viewportAware && compactViewport;
     const isAlert = role === "alertdialog";
     const contentNodeRef = React.useRef<HTMLDivElement | null>(null);
     const surfaceCleanupRef = React.useRef<(() => void) | null>(null);
@@ -88,6 +140,10 @@ const DialogContent = React.forwardRef<
           if (!compact) {
             surfaceCleanupRef.current = connectModalSurface(node);
           }
+          if (!viewportAware) {
+            assignRef(ref, node);
+            return;
+          }
           const viewport = connectOverlayViewport(node);
           const keyboard = connectKeyboardScroll(node);
           const pointerEvents = connectBodyPointerEventsFix();
@@ -100,7 +156,7 @@ const DialogContent = React.forwardRef<
 
         assignRef(ref, node);
       },
-      [ref, compact],
+      [ref, compact, viewportAware],
     );
 
     React.useLayoutEffect(() => {
@@ -134,10 +190,11 @@ const DialogContent = React.forwardRef<
               : {})}
           onOpenAutoFocus={handleOpenAutoFocus}
           data-compact={compact ? "true" : undefined}
-          className={cn(
-            "glass-panel-strong z-50 flex w-full flex-col gap-4 p-6 text-overlay-foreground smooth-shadow-ring-xl",
+          className={merge(
+            classes?.content ??
+              "glass-panel-strong z-50 flex w-full flex-col gap-4 p-6 text-overlay-foreground smooth-shadow-ring-xl",
             compact
-              ? cn(
+              ? classes?.compact ?? cn(
                   "overflow-y-auto fixed inset-x-0 top-auto w-full max-w-none rounded-t-2xl rounded-b-none pt-3",
                   "max-h-[var(--overlay-vv-height,100dvh)]",
                   "bottom-[var(--overlay-vv-bottom,0px)]",
@@ -146,7 +203,8 @@ const DialogContent = React.forwardRef<
                   "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom",
                   "motion-reduce:animate-none motion-reduce:data-[state=open]:animate-none motion-reduce:data-[state=closed]:animate-none",
                 )
-              : "t-modal fixed left-1/2 top-1/2 max-h-[90dvh] max-w-lg max-sm:w-[calc(100vw-2rem)] overflow-y-auto rounded-lg",
+              : classes?.centered ??
+                  "t-modal fixed left-1/2 top-1/2 max-h-[90dvh] max-w-lg max-sm:w-[calc(100vw-2rem)] overflow-y-auto rounded-lg",
             className,
           )}
           {...props}
@@ -170,10 +228,13 @@ const DialogContent = React.forwardRef<
           {children}
           {!hideCloseButton && (
             <DialogPrimitive.Close
-              className={cn(
-                "absolute right-2 top-2 inline-flex h-11 w-11 items-center justify-center rounded-lg text-overlay-foreground/70 transition-[background-color,transform] hover:bg-surface-tertiary/50 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:pointer-events-none",
-                "motion-reduce:transition-none",
-              )}
+              className={
+                classes?.close ??
+                cn(
+                  "absolute right-2 top-2 inline-flex h-11 w-11 items-center justify-center rounded-lg text-overlay-foreground/70 transition-[background-color,transform] hover:bg-surface-tertiary/50 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:pointer-events-none",
+                  "motion-reduce:transition-none",
+                )
+              }
             >
               <IconX className="h-4 w-4" />
               <span className="sr-only">Close</span>
@@ -189,26 +250,34 @@ DialogContent.displayName = DialogPrimitive.Content.displayName;
 const DialogHeader = ({
   className,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("flex flex-col gap-1.5 pr-10 text-left", className)}
-    {...props}
-  />
-);
+}: React.HTMLAttributes<HTMLDivElement>) => {
+  const header = useUiConfig("Dialog")?.classes?.header;
+  const merge = useCn();
+  return (
+    <div
+      className={merge(header ?? "flex flex-col gap-1.5 pr-10 text-left", className)}
+      {...props}
+    />
+  );
+};
 DialogHeader.displayName = "DialogHeader";
 
 const DialogBody = ({
   className,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "min-h-11 flex-1 overflow-y-auto overscroll-contain",
-      className,
-    )}
-    {...props}
-  />
-);
+}: React.HTMLAttributes<HTMLDivElement>) => {
+  const body = useUiConfig("Dialog")?.classes?.body;
+  const merge = useCn();
+  return (
+    <div
+      className={merge(
+        body ?? "min-h-11 flex-1 overflow-y-auto overscroll-contain",
+        className,
+      )}
+      {...props}
+    />
+  );
+};
 DialogBody.displayName = "DialogBody";
 
 // no fill of its own: the footer is not sticky, so it shows the content's
@@ -218,49 +287,64 @@ DialogBody.displayName = "DialogBody";
 const DialogFooter = ({
   className,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    data-slot="dialog-footer"
-    className={cn(
-      "mt-auto flex flex-col-reverse gap-2 pt-2 sm:flex-row sm:justify-end",
-      "pb-[max(0px,env(safe-area-inset-bottom,0px))]",
-      "[&_button]:max-sm:min-h-11",
-      className,
-    )}
-    {...props}
-  />
-);
+}: React.HTMLAttributes<HTMLDivElement>) => {
+  const footer = useUiConfig("Dialog")?.classes?.footer;
+  const merge = useCn();
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={merge(
+        footer ?? [
+          "mt-auto flex flex-col-reverse gap-2 pt-2 sm:flex-row sm:justify-end",
+          "pb-[max(0px,env(safe-area-inset-bottom,0px))]",
+          "[&_button]:max-sm:min-h-11",
+        ],
+        className,
+      )}
+      {...props}
+    />
+  );
+};
 DialogFooter.displayName = "DialogFooter";
 
 const DialogTitle = React.forwardRef<
   React.ComponentRef<typeof DialogPrimitive.Title>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg font-semibold tracking-normal text-foreground text-balance",
-      className,
-    )}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const title = useUiConfig("Dialog")?.classes?.title;
+  const merge = useCn();
+  return (
+    <DialogPrimitive.Title
+      ref={ref}
+      className={merge(
+        title ?? "text-lg font-semibold tracking-normal text-foreground text-balance",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
 const DialogDescription = React.forwardRef<
   React.ComponentRef<typeof DialogPrimitive.Description>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn(
-      // `--muted` is ~3.5:1 on overlay; mix toward overlay-foreground for 4.5:1.
-      "text-sm leading-relaxed text-[color-mix(in_oklch,var(--color-popover-foreground,var(--overlay-foreground))_72%,var(--color-popover,var(--overlay)))]",
-      className,
-    )}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const description = useUiConfig("Dialog")?.classes?.description;
+  const merge = useCn();
+  return (
+    <DialogPrimitive.Description
+      ref={ref}
+      className={merge(
+        description ??
+          // `--muted` is ~3.5:1 on overlay; mix toward overlay-foreground for 4.5:1.
+          "text-sm leading-relaxed text-[color-mix(in_oklch,var(--color-popover-foreground,var(--overlay-foreground))_72%,var(--color-popover,var(--overlay)))]",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 const DialogRawContent = DialogPrimitive.Content;