@vvedantb/ui 0.4.0-rc.1 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.4.0-rc.1",
+  "version": "0.4.0",
   "license": "MIT",
   "description": "Shared React 19 UI for web apps: one JavaScript entry (primitives, shell pieces, app helpers, native tokens), design-token CSS, shared Tailwind v4 CSS and a Tailwind preset.",
   "type": "module",

package/src/composer/input-area/InputActions.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 import { IconPaperclip, IconPlus } from "@tabler/icons-react";
 import { Button } from "../../ui/button";
 import {
@@ -9,6 +9,10 @@ import {
   DropdownMenuTrigger,
 } from "../../ui/dropdown-menu";
 
+export type InputActionsMenuContentProps = ComponentPropsWithoutRef<
+  typeof DropdownMenuContent
+>;
+
 export type InputActionsProps = {
   showFileUpload?: boolean;
   onAttachFile?: () => void;
@@ -16,6 +20,11 @@ export type InputActionsProps = {
   /** Extra menu rows after the attach row, such as a skill picker and a connection item. Include your own separators. */
   extra?: ReactNode;
   attachLabel?: ReactNode;
+  /**
+   * Props merged onto the menu content. Defaults: `align="start"`, `side="top"`,
+   * `collisionPadding={12}`. Your keys win. A `className` replaces the default size classes.
+   */
+  menuContentProps?: InputActionsMenuContentProps;
 };
 
 export function InputActions({
@@ -24,6 +33,7 @@ export function InputActions({
   compact = false,
   extra,
   attachLabel = "Attach file",
+  menuContentProps,
 }: InputActionsProps) {
   return (
     <DropdownMenu>
@@ -41,9 +51,11 @@ export function InputActions({
       </DropdownMenuTrigger>
       <DropdownMenuContent
         aria-label="Tool options"
+        align="start"
         side="top"
         collisionPadding={12}
         className="max-h-[min(24rem,calc(100dvh-6rem))] max-w-[min(20rem,calc(100vw-1.5rem))] overflow-y-auto"
+        {...menuContentProps}
       >
         {showFileUpload ? (
           <>

package/src/composer/input-area/InputArea.tsx

@@ -23,7 +23,7 @@ import { SpeechInput } from "../../ai-elements/speech-input";
 import { chatInputContainerClass } from "../../ui/surface-classes";
 import { ComposerSlashMenu } from "./ComposerSlashMenu";
 import { FadePresence } from "./FadePresence";
-import { InputActions } from "./InputActions";
+import { InputActions, type InputActionsProps } from "./InputActions";
 import { motionFast } from "./motion";
 import type { ComposerSlashItem } from "./composerSlashItems";
 import { useComposerCompact } from "./useComposerCompact";
@@ -90,6 +90,8 @@ export type InputAreaProps = {
   chips?: ReactNode;
   /** Extra rows in the plus menu after the attach row. Include your own separators. */
   plusMenuExtra?: ReactNode;
+  /** Props merged onto the plus-menu dropdown content, such as `align`, `side` or `sideOffset`. Defaults: `align="start"`, `side="top"`. */
+  plusMenuContentProps?: InputActionsProps["menuContentProps"];
 
   /** Items for the `/` menu. Omit to turn the menu off. */
   slashItems?: ComposerSlashItem[];
@@ -141,6 +143,7 @@ export function InputArea({
   attachments,
   chips,
   plusMenuExtra,
+  plusMenuContentProps,
   slashItems,
   onSlashSelect,
   renderSlashItem,
@@ -244,6 +247,7 @@ export function InputArea({
       onAttachFile={openFilePicker}
       compact={compact}
       extra={plusMenuExtra}
+      menuContentProps={plusMenuContentProps}
     />
   );
 

package/src/ui/labeled-switch-row.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import { cn } from "../utils/cn";
 import { Label } from "./label";
 import { Switch } from "./switch";
 
@@ -11,6 +12,7 @@ interface LabeledSwitchRowProps {
   disabled?: boolean;
   icon?: ReactNode;
   trailing?: ReactNode;
+  className?: string;
 }
 
 export function LabeledSwitchRow({
@@ -22,9 +24,10 @@ export function LabeledSwitchRow({
   disabled,
   icon,
   trailing,
+  className,
 }: LabeledSwitchRowProps) {
   return (
-    <div className="flex items-center justify-between gap-3 max-sm:flex-wrap">
+    <div className={cn("flex items-center justify-between gap-3 max-sm:flex-wrap", className)}>
       <div className="flex min-w-0 items-start gap-2">
         {icon ? (
           <span className="mt-0.5 shrink-0 text-muted-foreground">{icon}</span>