@vuer-ai/vuer-uikit 0.0.120 → 0.0.121

package/src/ui/inputs/text-input.tsx

@@ -40,4 +40,4 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function T
       {suffix && <InputSlot side="right">{suffix}</InputSlot>}
     </InputRoot>
   );
-});
+});

package/src/ui/layouts/dock-layout/DockLayoutView.tsx

@@ -21,6 +21,7 @@ interface DockLayoutViewProps {
   topClassName?: string;
   bottomClassName?: string;
   contentClassName?: string;
+  hideUI?: boolean;
 }
 
 export const DockLayoutView = ({
@@ -35,18 +36,28 @@ export const DockLayoutView = ({
   topClassName,
   bottomClassName,
   contentClassName,
+  hideUI = false,
 }: DockLayoutViewProps) => {
+  const uiVisibilityClass = hideUI ? "invisible pointer-events-none" : "";
+
   return (
     <DockLayout className={className}>
-      {top && <DockLayoutTop className={topClassName}>{top}</DockLayoutTop>}
+      <DockLayoutContent className={contentClassName}>{children}</DockLayoutContent>
+
+      {top && (
+        <DockLayoutTop className={`${topClassName} ${uiVisibilityClass}`}>{top}</DockLayoutTop>
+      )}
 
-      <div className="flex flex-1 overflow-hidden">
+      <div className={`flex h-full flex-row justify-between overflow-hidden ${uiVisibilityClass}`}>
         {left && <DockLayoutLeft className={leftClassName}>{left}</DockLayoutLeft>}
-        <DockLayoutContent className={contentClassName}>{children}</DockLayoutContent>
         {right && <DockLayoutRight className={rightClassName}>{right}</DockLayoutRight>}
       </div>
 
-      {bottom && <DockLayoutBottom className={bottomClassName}>{bottom}</DockLayoutBottom>}
+      {bottom && (
+        <DockLayoutBottom className={`${bottomClassName} ${uiVisibilityClass}`}>
+          {bottom}
+        </DockLayoutBottom>
+      )}
     </DockLayout>
   );
 };

package/src/ui/layouts/dock-layout/LayoutSlots.tsx

@@ -10,7 +10,10 @@ export const DockLayout = forwardRef<HTMLDivElement, ComponentProps<"div">>(
       <div
         ref={ref}
         {...props}
-        className={cn("relative flex h-full w-full flex-col overflow-hidden", className)}
+        className={cn(
+          "relative flex h-full w-full flex-col justify-between overflow-hidden",
+          className,
+        )}
       />
     );
   },
@@ -27,7 +30,7 @@ export function DockLayoutContent({ className, ...props }: Readonly<ComponentPro
     <div
       {...props}
       className={cn(
-        "relative flex flex-1 flex-col items-center justify-center overflow-auto",
+        "absolute inset-0 z-0 flex flex-1 flex-col items-center justify-center overflow-auto",
         className,
       )}
     />
@@ -40,7 +43,7 @@ export function DockLayoutLeft({ className, asChild, ...props }: Readonly<DockLa
     <Comp
       {...props}
       className={cn(
-        "bg-bg-primary flex h-full flex-shrink-0 flex-col items-start gap-4",
+        "bg-bg-primary z-20 flex h-full flex-shrink-0 flex-col items-start gap-4",
         className,
       )}
     />
@@ -64,7 +67,10 @@ export function DockLayoutRight({ className, asChild, ...props }: Readonly<DockL
   return (
     <Comp
       {...props}
-      className={cn("bg-bg-primary flex h-full flex-shrink-0 flex-col items-end gap-4", className)}
+      className={cn(
+        "bg-bg-primary z-20 flex h-full flex-shrink-0 flex-col items-end gap-4",
+        className,
+      )}
     />
   );
 }
@@ -76,7 +82,10 @@ export const DockLayoutBottom = forwardRef<HTMLDivElement, DockLayoutChildProps>
       <Comp
         ref={ref}
         {...props}
-        className={cn("bg-bg-primary inline-flex w-full flex-shrink-0 justify-center", className)}
+        className={cn(
+          "bg-bg-primary z-20 inline-flex w-full flex-shrink-0 justify-center",
+          className,
+        )}
       />
     );
   },

package/src/ui/layouts/liquid-layout/LiquidLayoutView.tsx

@@ -25,6 +25,18 @@ interface LiquidLayoutViewProps {
   children?: ReactNode;
   /** Additional CSS classes to apply to the root element */
   className?: string;
+  /** Additional CSS classes to apply to the left slot */
+  leftClassName?: string;
+  /** Additional CSS classes to apply to the right slot */
+  rightClassName?: string;
+  /** Additional CSS classes to apply to the top slot */
+  topClassName?: string;
+  /** Additional CSS classes to apply to the bottom slot */
+  bottomClassName?: string;
+  /** Additional CSS classes to apply to the content slot */
+  contentClassName?: string;
+  /** Hide all UI panels */
+  hideUI?: boolean;
 }
 
 /**
@@ -41,16 +53,43 @@ export const LiquidLayoutView = ({
   bottom,
   children,
   className,
+  leftClassName,
+  rightClassName,
+  topClassName,
+  bottomClassName,
+  contentClassName,
+  hideUI = false,
 }: LiquidLayoutViewProps) => {
+  const uiVisibilityClass = hideUI ? "invisible pointer-events-none" : "";
+
   return (
     <LiquidLayout className={className}>
-      <LiquidLayoutContent className="absolute flex flex-col items-center justify-center">
+      <LiquidLayoutContent
+        className={`absolute inset-0 z-0 flex flex-col items-center justify-center ${contentClassName || ""}`}
+      >
         {children}
       </LiquidLayoutContent>
-      {bottom && <LiquidLayoutBottom className="mt-4">{bottom}</LiquidLayoutBottom>}
-      {right && <LiquidLayoutRight className="max-w-75">{right}</LiquidLayoutRight>}
-      {top && <LiquidLayoutTop>{top}</LiquidLayoutTop>}
-      {left && <LiquidLayoutLeft className="max-w-75">{left}</LiquidLayoutLeft>}
+
+      {bottom && (
+        <LiquidLayoutBottom className={`z-20 mt-4 ${bottomClassName || ""} ${uiVisibilityClass}`}>
+          {bottom}
+        </LiquidLayoutBottom>
+      )}
+      {right && (
+        <LiquidLayoutRight className={`z-20 max-w-75 ${rightClassName || ""} ${uiVisibilityClass}`}>
+          {right}
+        </LiquidLayoutRight>
+      )}
+      {top && (
+        <LiquidLayoutTop className={`z-20 ${topClassName || ""} ${uiVisibilityClass}`}>
+          {top}
+        </LiquidLayoutTop>
+      )}
+      {left && (
+        <LiquidLayoutLeft className={`z-20 max-w-75 ${leftClassName || ""} ${uiVisibilityClass}`}>
+          {left}
+        </LiquidLayoutLeft>
+      )}
     </LiquidLayout>
   );
 };

package/src/ui/progress.tsx

@@ -1,20 +1,13 @@
-import { type ComponentProps } from "react"
-import * as ProgressPrimitive from "@radix-ui/react-progress"
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { type ComponentProps } from "react";
 
-import { cn } from "../hooks"
+import { cn } from "../hooks";
 
-function Progress({
-  className,
-  value,
-  ...props
-}: ComponentProps<typeof ProgressPrimitive.Root>) {
+function Progress({ className, value, ...props }: ComponentProps<typeof ProgressPrimitive.Root>) {
   return (
     <ProgressPrimitive.Root
       data-slot="progress"
-      className={cn(
-        "bg-bg-secondary relative h-2 w-full overflow-hidden rounded-uk-xl",
-        className
-      )}
+      className={cn("bg-bg-secondary rounded-uk-xl relative h-2 w-full overflow-hidden", className)}
       {...props}
     >
       <ProgressPrimitive.Indicator
@@ -23,7 +16,7 @@ function Progress({
         style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
       />
     </ProgressPrimitive.Root>
-  )
+  );
 }
 
-export { Progress }
+export { Progress };

package/src/ui/separator.tsx

@@ -11,7 +11,7 @@ function Separator({
 }: ComponentProps<typeof SeparatorPrimitive.Root>) {
   return (
     <SeparatorPrimitive.Root
-      data-slot="separator-root"
+      data-slot="separator"
       decorative={decorative}
       orientation={orientation}
       className={cn(

package/src/ui/sheet.tsx

@@ -2,75 +2,29 @@ import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { XIcon } from "lucide-react";
 import { ComponentProps } from "react";
 
-import { cn, createClientOnlyComponent } from "../hooks";
+import { cn } from "../hooks";
 
 /**
  * Sheet root using dialog primitives.
  */
-function SheetRoot({ ...props }: ComponentProps<typeof SheetPrimitive.Root>) {
+function Sheet({ ...props }: ComponentProps<typeof SheetPrimitive.Root>) {
   return <SheetPrimitive.Root data-slot="sheet" {...props} />;
 }
 
-function SheetFallback({ ...props }: ComponentProps<"div">) {
-  return <div data-slot="sheet" {...props} />;
-}
-
-const Sheet = createClientOnlyComponent(SheetRoot, SheetFallback);
-
 /**
  * Trigger element that opens the sheet.
  */
-function SheetTriggerRoot({ ...props }: ComponentProps<typeof SheetPrimitive.Trigger>) {
+function SheetTrigger({ ...props }: ComponentProps<typeof SheetPrimitive.Trigger>) {
   return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
 }
 
-function SheetTriggerFallback({
-  asChild,
-  children,
-  ...props
-}: ComponentProps<"button"> & { asChild?: boolean }) {
-  if (asChild) {
-    return <>{children}</>;
-  }
-  return (
-    <button data-slot="sheet-trigger" {...props}>
-      {children}
-    </button>
-  );
-}
-
-const SheetTrigger = createClientOnlyComponent(SheetTriggerRoot, SheetTriggerFallback);
-
 /**
  * Close control for the sheet.
  */
-function SheetCloseRoot({ ...props }: ComponentProps<typeof SheetPrimitive.Close>) {
-  return (
-    <SheetPrimitive.Close
-      data-slot="sheet-close"
-      className={cn("focus:ring-0 focus:outline-none")}
-      {...props}
-    />
-  );
+function SheetClose({ ...props }: ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
 }
 
-function SheetCloseFallback({
-  asChild,
-  children,
-  ...props
-}: ComponentProps<"button"> & { asChild?: boolean }) {
-  if (asChild) {
-    return <>{children}</>;
-  }
-  return (
-    <button data-slot="sheet-close" className={cn("focus:ring-0 focus:outline-none")} {...props}>
-      {children}
-    </button>
-  );
-}
-
-const SheetClose = createClientOnlyComponent(SheetCloseRoot, SheetCloseFallback);
-
 /**
  * Portal for sheet overlay and content.
  */
@@ -97,7 +51,7 @@ function SheetOverlay({ className, ...props }: ComponentProps<typeof SheetPrimit
 /**
  * Sliding panel content for the sheet.
  */
-function SheetContentRoot({
+function SheetContent({
   className,
   children,
   side = "right",
@@ -111,21 +65,21 @@ function SheetContentRoot({
       <SheetPrimitive.Content
         data-slot="sheet-content"
         className={cn(
-          "liquid-dark:liquid-dark-bg liquid-light:liquid-light-bg bg-bg-primary data-[state=open]:animate-in data-[state=closed]:animate-out p-xl fixed z-50 flex flex-col gap-4 shadow-[0_4px_16px_0_var(--color-shadow-secondary)] transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          "liquid-dark:liquid-dark-bg liquid-light:liquid-light-bg bg-bg-primary data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
           side === "right" &&
-            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-[340px]",
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
           side === "left" &&
-            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-[340px]",
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
           side === "top" &&
-            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto",
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
           side === "bottom" &&
-            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto",
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
           className,
         )}
         {...props}
       >
         {children}
-        <SheetPrimitive.Close className="text-icon-primary hover:text-icon-highlight absolute top-4 right-4 disabled:pointer-events-none">
+        <SheetPrimitive.Close className="ring-offset-bg-primary focus:ring-bg-mask data-[state=open]:bg-bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
           <XIcon className="size-4" />
           <span className="sr-only">Close</span>
         </SheetPrimitive.Close>
@@ -134,38 +88,6 @@ function SheetContentRoot({
   );
 }
 
-function SheetContentFallback({
-  className,
-  children,
-  side = "right",
-  ...props
-}: ComponentProps<"div"> & {
-  side?: "top" | "right" | "bottom" | "left";
-}) {
-  return (
-    <div
-      data-slot="sheet-content"
-      className={cn(
-        "liquid-dark:liquid-dark-bg liquid-light:liquid-light-bg bg-bg-primary p-xl fixed z-50 flex flex-col gap-4 shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
-        side === "right" && "inset-y-0 right-0 h-full w-[340px]",
-        side === "left" && "inset-y-0 left-0 h-full w-[340px]",
-        side === "top" && "inset-x-0 top-0 h-auto",
-        side === "bottom" && "inset-x-0 bottom-0 h-auto",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <button className="text-icon-primary hover:text-icon-highlight absolute top-4 right-4 disabled:pointer-events-none">
-        <XIcon className="size-4" />
-        <span className="sr-only">Close</span>
-      </button>
-    </div>
-  );
-}
-
-const SheetContent = createClientOnlyComponent(SheetContentRoot, SheetContentFallback);
-
 /**
  * Header section inside the sheet.
  */
@@ -195,7 +117,7 @@ function SheetFooter({ className, ...props }: ComponentProps<"div">) {
 /**
  * Title text for the sheet.
  */
-function SheetTitleRoot({ className, ...props }: ComponentProps<typeof SheetPrimitive.Title>) {
+function SheetTitle({ className, ...props }: ComponentProps<typeof SheetPrimitive.Title>) {
   return (
     <SheetPrimitive.Title
       data-slot="sheet-title"
@@ -205,22 +127,10 @@ function SheetTitleRoot({ className, ...props }: ComponentProps<typeof SheetPrim
   );
 }
 
-function SheetTitleFallback({ className, ...props }: ComponentProps<"h2">) {
-  return (
-    <h2
-      data-slot="sheet-title"
-      className={cn("text-text-highlight text-uk-xl leading-uk-xl font-medium", className)}
-      {...props}
-    />
-  );
-}
-
-const SheetTitle = createClientOnlyComponent(SheetTitleRoot, SheetTitleFallback);
-
 /**
  * Secondary description text for the sheet.
  */
-function SheetDescriptionRoot({
+function SheetDescription({
   className,
   ...props
 }: ComponentProps<typeof SheetPrimitive.Description>) {
@@ -233,18 +143,6 @@ function SheetDescriptionRoot({
   );
 }
 
-function SheetDescriptionFallback({ className, ...props }: ComponentProps<"p">) {
-  return (
-    <p
-      data-slot="sheet-description"
-      className={cn("text-text-secondary text-uk-md leading-uk-md", className)}
-      {...props}
-    />
-  );
-}
-
-const SheetDescription = createClientOnlyComponent(SheetDescriptionRoot, SheetDescriptionFallback);
-
 export {
   Sheet,
   SheetTrigger,

package/src/ui/sidebar.tsx

@@ -2,15 +2,15 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva, VariantProps } from "class-variance-authority";
 import { PanelLeftIcon } from "lucide-react";
 import {
+  ComponentProps,
   createContext,
+  CSSProperties,
+  MouseEvent,
   useCallback,
   useContext,
   useEffect,
   useMemo,
   useState,
-  CSSProperties,
-  ComponentProps,
-  MouseEvent,
 } from "react";
 
 import { cn } from "../hooks";
@@ -152,7 +152,10 @@ function Sidebar({
     return (
       <div
         data-slot="sidebar"
-        className={cn("flex h-full w-(--sidebar-width) flex-col", className)}
+        className={cn(
+          "bg-bg-primary text-text-primary flex h-full w-(--sidebar-width) flex-col",
+          className,
+        )}
         {...props}
       >
         {children}
@@ -187,7 +190,7 @@ function Sidebar({
 
   return (
     <div
-      className="group peer hidden md:block"
+      className="group peer text-text-primary hidden md:block"
       data-state={state}
       data-collapsible={state === "collapsed" ? collapsible : ""}
       data-variant={variant}
@@ -232,7 +235,7 @@ function Sidebar({
 }
 
 function SidebarTrigger({ className, onClick, ...props }: ComponentProps<typeof Button>) {
-  const { toggleSidebar, state } = useSidebar();
+  const { toggleSidebar } = useSidebar();
 
   return (
     <Button
@@ -240,12 +243,7 @@ function SidebarTrigger({ className, onClick, ...props }: ComponentProps<typeof
       data-slot="sidebar-trigger"
       variant="ghost"
       icon={true}
-      className={cn(
-        "absolute top-[0px] size-7 transition-[left] duration-200 ease-linear",
-        state === "collapsed" && "left-[2px]",
-        state === "expanded" && "left-[var(--sidebar-width)]",
-        className,
-      )}
+      className={cn("size-7 transition-[left] duration-200 ease-linear", className)}
       onClick={(event: MouseEvent<HTMLButtonElement>) => {
         onClick?.(event);
         toggleSidebar();
@@ -288,7 +286,7 @@ function SidebarInset({ className, ...props }: ComponentProps<"main">) {
     <main
       data-slot="sidebar-inset"
       className={cn(
-        "relative flex w-full flex-1 flex-col",
+        "bg-bg-primary relative flex w-full flex-1 flex-col",
         "md:peer-data-[variant=inset]:rounded-uk-xl md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
         className,
       )}
@@ -338,7 +336,7 @@ function SidebarSeparator({ className, ...props }: ComponentProps<typeof Separat
     <Separator
       data-slot="sidebar-separator"
       data-sidebar="separator"
-      className={cn("bg-line-primary", className)}
+      className={cn("bg-line-primary mr-0", className)}
       {...props}
     />
   );
@@ -350,7 +348,7 @@ function SidebarContent({ className, ...props }: ComponentProps<"div">) {
       data-slot="sidebar-content"
       data-sidebar="content"
       className={cn(
-        "px-md lgflex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        "px-md flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
         className,
       )}
       {...props}
@@ -454,17 +452,18 @@ function SidebarMenuItem({ className, ...props }: ComponentProps<"li">) {
 }
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-md overflow-hidden rounde-uk-md text-left text-uk-lg leading-uk-lg outline-hidden ring-sidebar-ring transition-[width,height,padding] text-text-primary focus-visible:ring-2 active:text-text-highlight disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 font-medium group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-[16px] [&>svg]:shrink-0",
+  "peer/menu-button flex w-full items-center gap-md overflow-hidden rounded-uk-md p-2 text-left text-uk-lg leading-uk-lg outline-hidden ring-sidebar-ring transition-[width,height,padding] text-text-primary hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-bg-secondary active:text-text-highlight disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium data-[active=true]:bg-bg-secondary data-[active=true]:text-text-highlight group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4 [&>svg:not([class*='size-'])]:shrink-0",
   {
     variants: {
       variant: {
-        default: "",
-        outline: "",
+        default: "hover:bg-bg-secondary hover:text-secondary",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-bg-tertiary hover:text-text-tertiary hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
       },
       size: {
         default: "h-[36px] text-uk-lg leading-uk-lg",
         sm: "h-[30px] text-uk-sm leading-uk-sm",
-        lg: "h-[32px] text-uk-lg leading-uk-lg group-data-[collapsible=icon]:p-0!",
+        lg: "h-[32px] text-uk-lg leading-uk-lg px-lg py-sm group-data-[collapsible=icon]:p-0!",
       },
     },
     defaultVariants: {