@vuer-ai/vuer-uikit 0.0.120 → 0.1.0

package/src/highlight-cursor/types.ts

@@ -21,7 +21,8 @@ export interface CursorProviderProps extends HTMLAttributes<HTMLDivElement> {
   maxOffsetX?: number;
   maxOffsetY?: number;
   cursorSize?: number;
-  transitionDuration?: number;
+  boundaryThreshold?: number;
+  outerThreshold?: number;
   cursorClassName?: string;
   as?: ElementType;
 }

package/src/hooks/cn.ts

@@ -14,6 +14,10 @@ const twMerge = extendTailwindMerge({
       p: ["p-xxs", "p-xs", "p-sm", "p-md", "p-lg", "p-xl"],
       py: ["py-xxs", "py-xs", "py-sm", "py-md", "py-lg", "py-xl"],
       px: ["px-xxs", "px-xs", "px-sm", "px-md", "px-lg", "px-xl"],
+      pt: ["pt-xxs", "pt-xs", "pt-sm", "pt-md", "pt-lg", "pt-xl"],
+      pb: ["pb-xxs", "pb-xs", "pb-sm", "pb-md", "pb-lg", "pb-xl"],
+      pl: ["pl-xxs", "pl-xs", "pl-sm", "pl-md", "pl-lg", "pl-xl"],
+      pr: ["pr-xxs", "pr-xs", "pr-sm", "pr-md", "pr-lg", "pr-xl"],
       "font-size": [
         "text-uk-xs",
         "text-uk-sm",
@@ -22,6 +26,7 @@ const twMerge = extendTailwindMerge({
         "text-uk-xl",
         "text-uk-xxl",
       ],
+      "text-color": ["text-text-primary", "text-text-highlight"],
     },
   },
 });

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/styles/theme.css

@@ -16,8 +16,8 @@
 @utility liquid-light-bg {
   background: linear-gradient(
     147.1deg,
-    rgba(236, 236, 236, 0.6) 0%,
-    rgba(202, 202, 202, 0.6) 105.28%
+    rgba(246, 246, 246, 0.6) 0%,
+    rgba(232, 232, 232, 0.6) 105.28%
   ) !important;
   backdrop-filter: blur(5px) !important;
 }

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/alert-dialog.tsx

@@ -0,0 +1,168 @@
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { cva } from "class-variance-authority";
+import { ComponentProps } from "react";
+
+import { cn } from "../hooks";
+
+function AlertDialog({ ...props }: ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({ ...props }: ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
+}
+
+function AlertDialogPortal({ ...props }: ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
+}
+
+const alertDialogOverlayVariants = cva([
+  "fixed",
+  "inset-0",
+  "z-10",
+  "bg-bg-mask",
+  "transition-all",
+  "duration-200",
+]);
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(alertDialogOverlayVariants(), className)}
+      {...props}
+    />
+  );
+}
+
+const alertDialogContentVariants = cva([
+  "p-xl",
+  "bg-bg-primary",
+  "rounded-uk-xl",
+  "shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
+  "duration-200",
+  "transition-all",
+  "fixed",
+  "translate-x-[-50%]",
+  "translate-y-[-50%]",
+  "z-11",
+  "left-1/2",
+  "top-1/2",
+  "flex",
+  "flex-col",
+  "w-full",
+  "max-w-[calc(100%-2rem)]",
+  "gap-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",
+  "liquid-dark:liquid-dark-bg",
+  "liquid-light:liquid-light-bg",
+]);
+
+function AlertDialogContent({
+  className,
+  ...props
+}: ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(alertDialogContentVariants(), className)}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex", "flex-col", "gap-sm", "text-center", "sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "w-full",
+        "flex",
+        "flex-col-reverse",
+        "gap-sm",
+        "sm:flex-row",
+        "sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "text-text-highlight",
+        "text-uk-lg",
+        "leading-uk-lg",
+        "font-medium",
+        "py-lg",
+        "px-xl",
+        "text-center",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-text-primary", "text-uk-md", "leading-uk-md", "text-start", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({ ...props }: ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return <AlertDialogPrimitive.Action data-slot="alert-dialog-action" {...props} />;
+}
+
+function AlertDialogCancel({ ...props }: ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return <AlertDialogPrimitive.Cancel data-slot="alert-dialog-cancel" {...props} />;
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

package/src/ui/badge.tsx

@@ -28,6 +28,7 @@ const badgeVariants = cva(
     variants: {
       variant: {
         default: "bg-brand-primary",
+        outline: "text-text-primary bg-transparent border border-bg-tertiary",
         secondary: "bg-bg-secondary text-text-primary",
         destructive: "bg-danger-primary",
         success: "bg-accent-success",

package/src/ui/card.tsx

@@ -1,23 +1,22 @@
 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",
     "bg-bg-primary",
     "liquid-dark:liquid-dark-bg",
-    "liquid-dark:border-[0.9px]",
-    "liquid-dark:border-[rgba(85,85,85,100)]",
     "liquid-light:liquid-light-bg",
-    "liquid-light:border-[0.8px]",
-    "liquid-light:border-[white]",
   ],
   {
     variants: {
@@ -34,13 +33,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 h-6 -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>
+  );
 }
 
 /**