@vvedantb/ui 0.3.1 → 0.4.0-rc.0

package/src/composer/input-area/useInputAreaPrediction.ts

@@ -0,0 +1,49 @@
+import { useEffect, useState } from "react";
+import {
+  ghostSuggestion,
+  scheduleCompletion,
+  shouldSkipPrediction,
+} from "./composerPrediction";
+
+/**
+ * As-you-type ghost text for `InputArea`. The caller renders `suggestion` and
+ * owns accepting it. A result shows only while the draft it was requested for
+ * is still the current draft. Pass `getPrediction` to make the request.
+ */
+export function useInputAreaPrediction({
+  value,
+  suspended = false,
+  enabled = true,
+  getPrediction,
+}: {
+  value: string;
+  suspended?: boolean;
+  enabled?: boolean;
+  getPrediction?: (text: string) => Promise<string>;
+}): { suggestion: string | undefined; dismiss: () => void } {
+  const [result, setResult] = useState<{ forValue: string; text: string }>();
+  const [dismissedFor, setDismissedFor] = useState<string>();
+
+  const idle =
+    !enabled ||
+    getPrediction === undefined ||
+    suspended ||
+    shouldSkipPrediction(value);
+  const settled = result?.forValue === value || dismissedFor === value;
+
+  // Debounced request: it has to react to the draft changing.
+  useEffect(() => {
+    if (idle || settled || getPrediction === undefined) return;
+    return scheduleCompletion(
+      value,
+      getPrediction,
+      (text) => setResult({ forValue: value, text }),
+    );
+  }, [value, idle, settled, getPrediction]);
+
+  const visible = !idle && dismissedFor !== value && result?.forValue === value;
+  return {
+    suggestion: visible ? ghostSuggestion(value, result.text) : undefined,
+    dismiss: () => setDismissedFor(value),
+  };
+}

package/src/ui/button.tsx

@@ -39,17 +39,26 @@ export interface ButtonProps
     React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
+  /** Rendered before the children. Ignored with `asChild`. */
+  startContent?: React.ReactNode;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+  ({ className, variant, size, asChild = false, startContent, children, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
-      />
+      >
+        {asChild ? children : (
+          <>
+            {startContent}
+            {children}
+          </>
+        )}
+      </Comp>
     );
   },
 );

package/src/ui/dropdown-menu.tsx

@@ -75,14 +75,42 @@ const DropdownMenuItem = React.forwardRef<
   React.ComponentRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
     inset?: boolean;
+    /** Leading icon or mark. Ignored with `asChild`. */
+    startContent?: React.ReactNode;
+    /** Second line under the label. Ignored with `asChild`. */
+    description?: React.ReactNode;
   }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(menuItemClass, inset && "pl-8", className)}
-    {...props}
-  />
-));
+>(
+  (
+    { className, inset, startContent, description, children, asChild, ...props },
+    ref,
+  ) => (
+    <DropdownMenuPrimitive.Item
+      ref={ref}
+      asChild={asChild}
+      className={cn(menuItemClass, inset && "pl-8", className)}
+      {...props}
+    >
+      {asChild || (startContent === undefined && description === undefined) ? (
+        children
+      ) : (
+        <>
+          {startContent}
+          {description === undefined ? (
+            children
+          ) : (
+            <span className="flex min-w-0 flex-col">
+              <span>{children}</span>
+              <span className="text-xs text-muted-foreground">
+                {description}
+              </span>
+            </span>
+          )}
+        </>
+      )}
+    </DropdownMenuPrimitive.Item>
+  ),
+);
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
 const DropdownMenuCheckboxItem = React.forwardRef<