@vvedantb/ui 0.1.2 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "license": "MIT",
   "description": "Shared React 19 UI primitives for vmem, vibot and Verve.",
   "type": "module",
@@ -30,11 +30,6 @@
   "sideEffects": [
     "./src/ui/sonner.css"
   ],
-  "scripts": {
-    "build": "tsc -p tsconfig.json",
-    "typecheck": "tsc -p tsconfig.json",
-    "prepack": "tsc -p tsconfig.json"
-  },
   "peerDependencies": {
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-checkbox": "^1.3.3",
@@ -105,7 +100,6 @@
     "@tabler/icons-react": "^3.35.0",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
-    "@vvedantb/tokens": "workspace:*",
     "ai": "^5.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -122,6 +116,11 @@
     "tailwind-merge": "^2.6.0",
     "typescript": "^5.9.0",
     "use-stick-to-bottom": "^1.1.0",
-    "vaul": "^1.1.0"
+    "vaul": "^1.1.0",
+    "@vvedantb/tokens": "0.1.0"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json"
   }
-}
+}

package/src/ai-elements/message.tsx

@@ -33,8 +33,8 @@ export const MessageContent = ({
 }: MessageContentProps) => (
   <div
     className={cn(
-      "is-user:dark flex w-fit min-w-0 max-w-full flex-col gap-2 overflow-hidden text-sm",
-      "group-[.is-user]:ml-auto group-[.is-user]:rounded-2xl group-[.is-user]:rounded-br-md group-[.is-user]:bg-primary group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-primary-foreground",
+      "flex w-fit min-w-0 max-w-full flex-col gap-2 overflow-hidden text-sm",
+      "group-[.is-user]:ml-auto group-[.is-user]:rounded-2xl group-[.is-user]:rounded-br-md group-[.is-user]:bg-accent group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-accent-foreground",
       "group-[.is-assistant]:px-0 group-[.is-assistant]:text-foreground",
       className,
     )}

package/src/ai-elements/speech-input.tsx

@@ -250,8 +250,8 @@ export const SpeechInput = ({
         className={cn(
           "relative z-10 rounded-full transition-[background-color,transform] duration-200 ease-smooth active:duration-100 active:ease-out",
           isListening
-            ? "bg-destructive text-danger-foreground hover:bg-destructive/80 hover:text-danger-foreground"
-            : "bg-primary text-primary-foreground hover:bg-primary/80 hover:text-primary-foreground",
+            ? "bg-danger text-danger-foreground hover:bg-danger/80 hover:text-danger-foreground"
+            : "bg-accent text-accent-foreground hover:bg-accent/80 hover:text-accent-foreground",
           className,
         )}
         disabled={isDisabled}

package/src/ui/accordion.verve.tsx

@@ -31,7 +31,7 @@ const AccordionTrigger = React.forwardRef<
       {...props}
     >
       {children}
-      <IconChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+      <IconChevronDown className="h-4 w-4 shrink-0 text-muted transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ));
@@ -46,7 +46,7 @@ const AccordionContent = React.forwardRef<
     className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
     {...props}
   >
-    <div className={cn("pb-4 pt-0 text-muted-foreground", className)}>
+    <div className={cn("pb-4 pt-0 text-muted", className)}>
       {children}
     </div>
   </AccordionPrimitive.Content>

package/src/ui/badge.tsx

@@ -2,7 +2,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../utils/cn";
 
 const badgeVariants = cva(
-  "inline-flex items-center gap-1 rounded-full border border-transparent px-2.5 py-1 text-xs font-medium tracking-normal transition-colors focus:outline-none focus:ring-2 focus:ring-focus-ring focus:ring-offset-2",
+  "inline-flex items-center gap-1 rounded-full border border-transparent px-2.5 py-1 text-xs font-medium tracking-normal transition-colors focus:outline-none focus:ring-2 focus:ring-focus-ring focus:ring-offset-2 focus:ring-offset-background",
   {
     variants: {
       variant: {

package/src/ui/checkbox.tsx

@@ -10,7 +10,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer relative h-4 w-4 shrink-0 rounded-md border border-border bg-field-background transition-[background-color,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground before:absolute before:inset-[-12px] before:content-['']",
+      "peer relative h-4 w-4 shrink-0 rounded-[4px] border border-border bg-field-background transition-[background-color,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground before:absolute before:inset-[-12px] before:content-['']",
       className,
     )}
     {...props}

package/src/ui/clear-input.tsx

@@ -152,7 +152,7 @@ const ClearInput = React.forwardRef<HTMLInputElement, ClearInputProps>(
         {value.length > 0 && !clearing ? (
           <button
             type="button"
-            className="t-clear-btn absolute right-2 top-1/2 z-4 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-[background-color,color,transform] duration-100 ease-out active:scale-[0.92] hover:bg-surface-tertiary/50 hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring"
+            className="t-clear-btn absolute right-2 top-1/2 z-4 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-muted transition-[background-color,color,transform] duration-100 ease-out active:scale-[0.92] hover:bg-surface-tertiary/50 hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring"
             aria-label={clearLabel}
             onPointerDown={preventFocusSteal}
             onMouseDown={preventFocusSteal}

package/src/ui/command.tsx

@@ -72,10 +72,10 @@ CommandList.displayName = CommandPrimitive.List.displayName;
 const CommandEmpty = React.forwardRef<
   React.ComponentRef<typeof CommandPrimitive.Empty>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => (
+>(({ className, ...props }, ref) => (
   <CommandPrimitive.Empty
     ref={ref}
-    className="py-8 text-center text-sm text-muted"
+    className={cn("py-8 text-center text-sm text-muted", className)}
     {...props}
   />
 ));

package/src/ui/input-group.verve.tsx

@@ -102,7 +102,7 @@ function InputGroupText({
   return (
     <span
       className={cn(
-        "flex items-center text-sm text-muted-foreground/95",
+        "flex items-center text-sm text-muted/95",
         className,
       )}
       {...props}

package/src/ui/kbd.tsx

@@ -6,7 +6,7 @@ const Kbd = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
     <kbd
       ref={ref}
       className={cn(
-        "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded-md bg-surface-secondary px-1.5 font-mono text-[10px] font-medium text-muted-foreground",
+        "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded-md bg-surface-secondary px-1.5 font-mono text-[10px] font-medium text-muted",
         className,
       )}
       {...props}

package/src/ui/select.tsx

@@ -74,7 +74,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-96 w-36 overflow-hidden outline-none",
+        "relative z-50 max-h-96 min-w-32 overflow-hidden outline-none",
         floatingSurfaceClass,
         floatingSurfaceAnimateClass,
         position === "popper" &&

package/src/ui/sheet.tsx

@@ -6,15 +6,23 @@ import { cn } from "../utils/cn";
 
 type SheetSide = "top" | "bottom" | "left" | "right";
 
+// vaul animates and drags from the Root's `direction`; SheetContent reads it
+// so `<Sheet direction="right">` places the panel on the right by default.
+const SheetDirectionContext = React.createContext<SheetSide>("bottom");
+
 function Sheet({
   shouldScaleBackground = false,
+  direction = "bottom",
   ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Root>) {
   return (
-    <DrawerPrimitive.Root
-      shouldScaleBackground={shouldScaleBackground}
-      {...props}
-    />
+    <SheetDirectionContext.Provider value={direction}>
+      <DrawerPrimitive.Root
+        shouldScaleBackground={shouldScaleBackground}
+        direction={direction}
+        {...props}
+      />
+    </SheetDirectionContext.Provider>
   );
 }
 
@@ -51,27 +59,32 @@ const sheetSideClass: Record<SheetSide, string> = {
 const SheetContent = React.forwardRef<
   React.ComponentRef<typeof DrawerPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {
+    /** Defaults to the parent Sheet's `direction`. */
     side?: SheetSide;
   }
->(({ className, children, side = "bottom", ...props }, ref) => (
-  <SheetPortal>
-    <SheetOverlay />
-    <DrawerPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed z-50 bg-overlay/95 text-overlay-foreground smooth-shadow-ring-xl outline-hidden backdrop-blur-xl",
-        sheetSideClass[side],
-        className,
-      )}
-      {...props}
-    >
-      {side === "bottom" || side === "top" ? (
-        <SheetHandle className="mx-auto mt-3 mb-1 h-1 w-12 shrink-0 rounded-full bg-surface-tertiary" />
-      ) : null}
-      {children}
-    </DrawerPrimitive.Content>
-  </SheetPortal>
-));
+>(({ className, children, side: sideProp, ...props }, ref) => {
+  const direction = React.useContext(SheetDirectionContext);
+  const side = sideProp ?? direction;
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <DrawerPrimitive.Content
+        ref={ref}
+        className={cn(
+          "fixed z-50 bg-overlay/95 text-overlay-foreground smooth-shadow-ring-xl outline-hidden backdrop-blur-xl",
+          sheetSideClass[side],
+          className,
+        )}
+        {...props}
+      >
+        {side === "bottom" || side === "top" ? (
+          <SheetHandle className="mx-auto mt-3 mb-1 h-1 w-12 shrink-0 rounded-full bg-surface-tertiary" />
+        ) : null}
+        {children}
+      </DrawerPrimitive.Content>
+    </SheetPortal>
+  );
+});
 SheetContent.displayName = "SheetContent";
 
 export {