@vuer-ai/vuer-uikit 0.0.120 → 0.0.121

package/src/hooks/useIsMobile.ts

@@ -1,35 +1,19 @@
-import { useSyncExternalStore } from "react";
+import { useEffect, useState } from "react";
 
 const MOBILE_BREAKPOINT = 768;
 
-function subscribe(callback: () => void) {
-  if (typeof window === "undefined") {
-    return () => {};
-  }
-
-  const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-
-  // Modern browsers
-  if (mql.addEventListener) {
-    mql.addEventListener("change", callback);
-    return () => mql.removeEventListener("change", callback);
-  }
-
-  // Fallback for older browsers
-  mql.addListener(callback);
-  return () => mql.removeListener(callback);
-}
-
-function getSnapshot() {
-  if (typeof window === "undefined") return false;
-  return window.innerWidth < MOBILE_BREAKPOINT;
-}
-
-function getServerSnapshot() {
-  // Return false on server - most users are on desktop
-  return false;
-}
-
 export function useIsMobile() {
-  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  const [isMobile, setIsMobile] = useState<boolean | undefined>(undefined);
+
+  useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
 }

package/src/index.css

@@ -2,4 +2,3 @@
 
 @import "./styles/variables.css";
 @import "./styles/theme.css";
-@import "./styles/toast.css";

package/src/ui/DialBadge.tsx

@@ -1,5 +1,5 @@
-import { GitBranch } from "lucide-react";
 import React from "react";
+
 import { cn } from "../hooks";
 
 // Version info for dial-cli package (injected at build time)
@@ -7,7 +7,8 @@ declare const __DIAL_VERSION__: string;
 declare const __DIAL_PACKAGE_NAME__: string;
 declare const __DIAL_GIT_HASH__: string;
 
-const DIAL_PACKAGE_NAME = typeof __DIAL_PACKAGE_NAME__ !== "undefined" ? __DIAL_PACKAGE_NAME__ : "@vuer-ai/dial-cli";
+const DIAL_PACKAGE_NAME =
+  typeof __DIAL_PACKAGE_NAME__ !== "undefined" ? __DIAL_PACKAGE_NAME__ : "@vuer-ai/dial-cli";
 const DIAL_PACKAGE_VERSION = typeof __DIAL_VERSION__ !== "undefined" ? __DIAL_VERSION__ : "dev";
 const DIAL_GIT_HASH = typeof __DIAL_GIT_HASH__ !== "undefined" ? __DIAL_GIT_HASH__ : "unknown";
 
@@ -52,14 +53,15 @@ function DialBadge({
 }: DialBadgeProps) {
   const packageShortName = "dial-cli";
   const displayValue = hash ? DIAL_GIT_HASH : DIAL_PACKAGE_VERSION;
-  const versionText = version || hash ? (prefix && !hash ? `v${displayValue}` : displayValue) : undefined;
+  const versionText =
+    version || hash ? (prefix && !hash ? `v${displayValue}` : displayValue) : undefined;
   const npmUrl = `https://www.npmjs.com/package/${DIAL_PACKAGE_NAME}/v/${DIAL_PACKAGE_VERSION}`;
 
   return (
     <div
       className={cn(
         "rounded-uk-xs rounded-r-uk-xs text-uk-sm bg-icon-withbg inline-flex items-center",
-        className
+        className,
       )}
       style={linkable ? { cursor: "pointer" } : undefined}
     >
@@ -105,4 +107,4 @@ function DialBadge({
 }
 
 export { DialBadge, DIAL_PACKAGE_VERSION, DIAL_PACKAGE_NAME, DIAL_GIT_HASH };
-export type { DialBadgeProps };
+export type { DialBadgeProps };

package/src/ui/card.tsx

@@ -1,13 +1,16 @@
 import { cva, type VariantProps } from "class-variance-authority";
-import { type ComponentProps } from "react";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { type ComponentProps, type ReactNode, useState } from "react";
 
 import { cn } from "../hooks";
+import { Button } from "./button";
 
 /**
  * Variants for the card component.
  */
 const cardVariants = cva(
   [
+    "relative",
     "flex",
     "flex-col",
     "rounded-uk-xl",
@@ -34,13 +37,82 @@ const cardVariants = cva(
   },
 );
 
-export interface CardProps extends ComponentProps<"div">, VariantProps<typeof cardVariants> {}
+export interface CardProps extends ComponentProps<"div">, VariantProps<typeof cardVariants> {
+  /**
+   * Enable collapse/expand functionality
+   */
+  collapsible?: boolean;
+  /**
+   * Content to display when card is collapsed (typically a label or title)
+   */
+  collapsedContent?: ReactNode;
+  /**
+   * Initially collapsed state (only used when collapsible is true)
+   */
+  defaultCollapsed?: boolean;
+}
 
 /**
  * Container card with default padding, radius and shadow.
  */
-function Card({ className, size, ...props }: CardProps) {
-  return <div data-slot="card" className={cn(cardVariants({ size, className }))} {...props} />;
+function Card({
+  className,
+  size,
+  collapsible,
+  collapsedContent,
+  defaultCollapsed = false,
+  children,
+  ...props
+}: CardProps) {
+  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
+
+  if (collapsible) {
+    if (isCollapsed) {
+      return (
+        <div
+          data-slot="card"
+          className={cn(cardVariants({ size }), "flex-row justify-between", className)}
+          {...props}
+        >
+          {collapsedContent}
+          <div className="right-lg absolute top-1/2 -translate-y-1/2">
+            <Button
+              variant="ghost"
+              size="sm"
+              icon
+              onClick={() => setIsCollapsed(false)}
+              className="hover:bg-shadow-secondary"
+            >
+              <ChevronDown strokeWidth={1.5} className="text-icon-primary size-4" />
+            </Button>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div data-slot="card" className={cn(cardVariants({ size, className }))} {...props}>
+        <div className="right-lg top-lg absolute">
+          <Button
+            variant="ghost"
+            size="sm"
+            icon
+            onClick={() => setIsCollapsed(true)}
+            className="hover:bg-shadow-secondary"
+          >
+            <ChevronUp strokeWidth={1.5} className="text-icon-primary size-4" />
+          </Button>
+        </div>
+        {children}
+      </div>
+    );
+  }
+
+  return (
+    <div data-slot="card" className={cn(cardVariants({ size, className }))} {...props}>
+      {children}
+    </div>
+  );
 }
 
 /**

package/src/ui/context-menu.tsx

@@ -0,0 +1,358 @@
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { ComponentProps } from "react";
+
+import { cn } from "../hooks";
+
+function ContextMenu({ ...props }: ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
+}
+
+function ContextMenuTrigger({ ...props }: ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />;
+}
+
+function ContextMenuPortal({ ...props }: ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />;
+}
+
+function ContextMenuContent({
+  className,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.Content>) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={cn(
+          [
+            "bg-bg-primary",
+            "p-md",
+            "data-[state=open]:animate-in",
+            "data-[state=closed]:animate-out",
+            "data-[state=closed]:fade-out-0",
+            "data-[state=open]:fade-in-0",
+            "data-[state=closed]:zoom-out-95",
+            "data-[state=open]:zoom-in-95",
+            "data-[side=bottom]:slide-in-from-top-2",
+            "data-[side=left]:slide-in-from-right-2",
+            "data-[side=right]:slide-in-from-left-2",
+            "data-[side=top]:slide-in-from-bottom-2",
+            "relative",
+            "z-50",
+            "max-h-(--radix-context-menu-content-available-height)",
+            "origin-(--radix-context-menu-content-transform-origin)",
+            "overflow-x-hidden",
+            "overflow-y-auto",
+            "rounded-uk-md",
+            "shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
+            "liquid-dark:liquid-dark-bg",
+            "liquid-light:liquid-light-bg",
+          ],
+          className,
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  );
+}
+
+function ContextMenuGroup({
+  className,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return (
+    <ContextMenuPrimitive.Group
+      data-slot="context-menu-group"
+      className={cn("space-y-xs", className)}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        [
+          "w-full",
+          "flex",
+          "gap-md",
+          "items-center",
+          "px-sm",
+          "py-xs",
+          "relative",
+          "cursor-default",
+          "rounded-uk-xs",
+          "text-uk-sm",
+          "leading-uk-sm",
+          "outline-hidden",
+          "select-none",
+          "hover:bg-bg-tertiary",
+          "data-[disabled]:pointer-events-none",
+          "data-[disabled]:text-bg-quaternary",
+          "[&_svg]:pointer-events-none",
+          "[&_svg]:shrink-0",
+          "[&_svg:not([class*='size-'])]:size-4",
+          "[&_svg:not([class*='text-'])]:text-muted-foreground",
+          variant === "destructive" && "text-text-danger",
+        ],
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      className={cn(
+        [
+          "w-full",
+          "flex",
+          "gap-md",
+          "items-center",
+          "pr-md",
+          "pl-[calc(var(--spacing-xl)*1.8)]",
+          "py-xs",
+          "relative",
+          "cursor-default",
+          "rounded-uk-xs",
+          "text-uk-sm",
+          "leading-uk-sm",
+          "outline-hidden",
+          "select-none",
+          "hover:bg-bg-tertiary",
+          "data-[disabled]:pointer-events-none",
+          "data-[disabled]:text-bg-quaternary",
+          "[&_svg:not([class*='size-'])]:size-4",
+          "[&_svg]:pointer-events-none",
+          "[&_svg]:shrink-0",
+        ],
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  );
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+  return <ContextMenuPrimitive.RadioGroup data-slot="context-menu-radio-group" {...props} />;
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      className={cn(
+        [
+          "w-full",
+          "hover:bg-bg-tertiary",
+          "outline-hidden",
+          "relative",
+          "flex",
+          "cursor-default",
+          "select-none",
+          "items-center",
+          "gap-md",
+          "rounded-uk-xs",
+          "py-xs",
+          "pl-[calc(var(--spacing-xl)*1.8)]",
+          "pr-md",
+          "text-uk-sm",
+          "leading-uk-sm",
+          "data-[disabled]:pointer-events-none",
+          "data-[disabled]:text-bg-quaternary",
+          "[&_svg:not([class*='size-'])]:size-4",
+          "[&_svg]:pointer-events-none",
+          "[&_svg]:shrink-0",
+        ],
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  );
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn("text-text-secondary text-uk-sm leading-uk-sm pb-lg pt-xs px-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn("bg-line-primary my-lg pointer-events-none h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuShortcut({ className, ...props }: ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn("text-text-tertiary text-uk-sm leading-uk-sm ml-auto", className)}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuSub({ ...props }: ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "w-full",
+        "flex",
+        "gap-md",
+        "items-center",
+        "px-sm",
+        "py-xs",
+        "relative",
+        "cursor-default",
+        "rounded-uk-xs",
+        "text-uk-sm",
+        "leading-uk-sm",
+        "outline-hidden",
+        "select-none",
+        "hover:bg-bg-tertiary",
+        "data-[state=open]:bg-bg-tertiary",
+        "data-[disabled]:pointer-events-none",
+        "data-[disabled]:text-bg-quaternary",
+        "[&_svg]:pointer-events-none",
+        "[&_svg]:shrink-0",
+        "[&_svg:not([class*='size-'])]:size-4",
+        "[&_svg:not([class*='text-'])]:text-muted-foreground",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </ContextMenuPrimitive.SubTrigger>
+  );
+}
+
+function ContextMenuSubContent({
+  className,
+  ...props
+}: ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      className={cn(
+        "bg-bg-primary",
+        "p-md",
+        "data-[state=open]:animate-in",
+        "data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0",
+        "data-[state=open]:fade-in-0",
+        "data-[state=closed]:zoom-out-95",
+        "data-[state=open]:zoom-in-95",
+        "data-[side=bottom]:slide-in-from-top-2",
+        "data-[side=left]:slide-in-from-right-2",
+        "data-[side=right]:slide-in-from-left-2",
+        "data-[side=top]:slide-in-from-bottom-2",
+        "relative",
+        "z-50",
+        "max-h-(--radix-context-menu-content-available-height)",
+        "origin-(--radix-context-menu-content-transform-origin)",
+        "overflow-x-hidden",
+        "overflow-y-auto",
+        "rounded-uk-md",
+        "shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
+        "liquid-dark:liquid-dark-bg",
+        "liquid-light:liquid-light-bg",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  ContextMenu,
+  ContextMenuPortal,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuLabel,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubTrigger,
+  ContextMenuSubContent,
+};
+

package/src/ui/index.ts

@@ -11,9 +11,11 @@ export * from "./sheet";
 export * from "./popover";
 export * from "./avatar";
 export * from "./tooltip";
+export * from "./separator";
 export * from "./toast";
 export * from "./textarea";
 export * from "./dropdown";
+export * from "./context-menu";
 export * from "./toggle";
 export * from "./toggle-buttons";
 export * from "./toggle-group";

package/src/ui/inputs/number-inputs/EulerRadInput.tsx

@@ -8,48 +8,49 @@ interface EulerRadInputProps extends Omit<VectorInputProps, "value" | "labels" |
   display?: "deg" | "pi" | "rad";
 }
 
-const EulerRadInput = forwardRef<HTMLDivElement, EulerRadInputProps>(
-  function EulerRadInput({ value, onValuesChange, display = "rad", ...props }, ref) {
-    const displayValues = useMemo(() => {
-      if (display === "deg") {
-        return value.map((v) => (v * 180) / Math.PI) as [number, number, number];
-      } else if (display === "pi") {
-        return value.map((v) => v / Math.PI) as [number, number, number];
-      }
-      return value;
-    }, [value, display]);
-
-    const handleChange = (displayVals: number[]) => {
-      let radValues: [number, number, number];
-      if (display === "deg") {
-        radValues = displayVals.map((v) => (v * Math.PI) / 180) as [number, number, number];
-      } else if (display === "pi") {
-        radValues = displayVals.map((v) => v * Math.PI) as [number, number, number];
-      } else {
-        radValues = displayVals as [number, number, number];
-      }
-      onValuesChange?.(radValues);
-    };
-
-    const unitSymbol = useMemo(() => {
-      if (display === "deg") return "°";
-      if (display === "pi") return "π";
-      return "rad";
-    }, [display]);
-
-    const labels = [`x${unitSymbol}`, `y${unitSymbol}`, `z${unitSymbol}`];
-
-    return (
-      <VectorInput
-        ref={ref}
-        value={displayValues}
-        onValuesChange={handleChange}
-        labels={labels}
-        {...props}
-      />
-    );
-  },
-);
+const EulerRadInput = forwardRef<HTMLDivElement, EulerRadInputProps>(function EulerRadInput(
+  { value, onValuesChange, display = "rad", ...props },
+  ref,
+) {
+  const displayValues = useMemo(() => {
+    if (display === "deg") {
+      return value.map((v) => (v * 180) / Math.PI) as [number, number, number];
+    } else if (display === "pi") {
+      return value.map((v) => v / Math.PI) as [number, number, number];
+    }
+    return value;
+  }, [value, display]);
+
+  const handleChange = (displayVals: number[]) => {
+    let radValues: [number, number, number];
+    if (display === "deg") {
+      radValues = displayVals.map((v) => (v * Math.PI) / 180) as [number, number, number];
+    } else if (display === "pi") {
+      radValues = displayVals.map((v) => v * Math.PI) as [number, number, number];
+    } else {
+      radValues = displayVals as [number, number, number];
+    }
+    onValuesChange?.(radValues);
+  };
+
+  const unitSymbol = useMemo(() => {
+    if (display === "deg") return "°";
+    if (display === "pi") return "π";
+    return "rad";
+  }, [display]);
+
+  const labels = [`x${unitSymbol}`, `y${unitSymbol}`, `z${unitSymbol}`];
+
+  return (
+    <VectorInput
+      ref={ref}
+      value={displayValues}
+      onValuesChange={handleChange}
+      labels={labels}
+      {...props}
+    />
+  );
+});
 
 export { EulerRadInput };
 export type { EulerRadInputProps };

package/src/ui/inputs/number-inputs/VectorInput.tsx

@@ -2,7 +2,6 @@ import React, { forwardRef, ReactNode } from "react";
 
 import { InputNumbers, InputNumbersProps } from "../input-numbers";
 
-
 interface VectorInputProps
   extends Omit<InputNumbersProps, "value" | "onValuesChange" | "onChange"> {
   value: number[];

package/src/ui/inputs/presets-rad-input.tsx

@@ -13,7 +13,10 @@ interface PresetsRadInputProps extends Omit<RadInputProps, "value" | "onChange">
 }
 
 export const PresetsRadInput = forwardRef<HTMLDivElement, PresetsRadInputProps>(
-  function PresetsRadInput({ presets, value = 0, onChange, display = "rad", size, className, ...props }, ref) {
+  function PresetsRadInput(
+    { presets, value = 0, onChange, display = "rad", size, className, ...props },
+    ref,
+  ) {
     const [preset, setPreset] = useState(value);
 
     const handleValueChange = (newValue: number) => {
@@ -74,4 +77,4 @@ export const PresetsRadInput = forwardRef<HTMLDivElement, PresetsRadInputProps>(
       </div>
     );
   },
-);
+);