@vuer-ai/vuer-uikit 0.0.119 → 0.0.121

package/src/ui/tree-view/TreeView.tsx

@@ -1,8 +1,15 @@
 import { ChevronDown } from "lucide-react";
-import { type ReactNode } from "react";
+import React, { type ReactNode, useState } from "react";
 
+import {
+  getMultiSelectState,
+  getRangeIds,
+  cleanIndirectSelectedNodes,
+  getAdjacentSelectionState,
+} from "./hooks";
 import { TreeDataItem, TreeDataItemWithMeta } from "./types";
 import { cn } from "../../hooks";
+import { ContextMenu, ContextMenuTrigger } from "../context-menu";
 
 /**
  * Props for the view-only tree component
@@ -15,12 +22,14 @@ export type TreeViewProps<T extends TreeDataItem> = {
   onItemHover?: (id: string | null) => void;
   hoveredId?: string | null;
   isSelectable?: boolean;
-  selectedItemId?: string | null;
-  onSelectChange?: (id: string | null) => void;
+  selectedItemIds?: Set<string>;
+  onSelectionChange?: (ids: Set<string>) => void;
   hideExpand?: boolean;
   hasDescendants?: (id: string) => boolean;
   renderLabel?: (label: string, itemId: string) => ReactNode;
   className?: string;
+  renderContextMenu?: (item: T) => ReactNode;
+  selectionMode?: "single" | "multi";
 };
 
 /**
@@ -36,13 +45,17 @@ export function TreeView<T extends TreeDataItem>({
   onItemHover,
   hoveredId,
   isSelectable = false,
-  selectedItemId,
-  onSelectChange,
+  selectedItemIds,
+  onSelectionChange,
   hideExpand = false,
   hasDescendants = () => false,
   renderLabel = (label) => label,
   className,
+  renderContextMenu,
+  selectionMode = "multi",
 }: TreeViewProps<T>) {
+  const [lastSelectedId, setLastSelectedId] = useState<string | null>(null);
+
   return (
     <div className={cn("flex-1 overflow-y-auto", className)}>
       {data.map((item) => (
@@ -52,8 +65,10 @@ export function TreeView<T extends TreeDataItem>({
           hoveredId={hoveredId}
           onItemHover={onItemHover}
           isSelectable={isSelectable}
-          selectedItemId={selectedItemId}
-          onSelectChange={onSelectChange}
+          selectedItemIds={selectedItemIds}
+          onSelectionChange={onSelectionChange}
+          lastSelectedId={lastSelectedId}
+          setLastSelectedId={setLastSelectedId}
           expandedItems={expandedItems}
           toggleItem={onToggleItem}
           hideExpand={hideExpand}
@@ -61,6 +76,8 @@ export function TreeView<T extends TreeDataItem>({
           getIcon={getIcon}
           renderLabel={renderLabel}
           dataWithMeta={data}
+          renderContextMenu={renderContextMenu}
+          selectionMode={selectionMode}
         />
       ))}
     </div>
@@ -75,8 +92,10 @@ export function TreeEntryItem<T extends TreeDataItem>({
   hoveredId,
   onItemHover,
   isSelectable,
-  selectedItemId,
-  onSelectChange,
+  selectedItemIds,
+  onSelectionChange,
+  lastSelectedId,
+  setLastSelectedId,
   expandedItems,
   toggleItem = () => {},
   hideExpand = false,
@@ -84,13 +103,17 @@ export function TreeEntryItem<T extends TreeDataItem>({
   getIcon = () => null,
   renderLabel = (label) => label,
   dataWithMeta = [],
+  renderContextMenu,
+  selectionMode = "multi",
 }: {
   item: TreeDataItemWithMeta<T>;
   hoveredId?: string | null;
   onItemHover?: (id: string | null) => void;
   isSelectable?: boolean;
-  selectedItemId?: string | null;
-  onSelectChange?: (id: string | null) => void;
+  selectedItemIds?: Set<string>;
+  onSelectionChange?: (ids: Set<string>) => void;
+  lastSelectedId?: string | null;
+  setLastSelectedId?: (id: string | null) => void;
   expandedItems?: Set<string>;
   toggleItem?: (id: string) => void;
   hideExpand?: boolean;
@@ -98,10 +121,58 @@ export function TreeEntryItem<T extends TreeDataItem>({
   getIcon?: (item: T, expanded?: boolean) => ReactNode;
   renderLabel?: (label: string, itemId: string) => ReactNode;
   dataWithMeta?: TreeDataItemWithMeta<T>[];
+  renderContextMenu?: (item: T) => ReactNode;
+  selectionMode?: "single" | "multi";
 }) {
-  const handleItemSelect = () => {
-    if (!item.disable && isSelectable && onSelectChange) {
-      onSelectChange(selectedItemId === item.id ? null : item.id);
+  const handleItemSelect = (event: React.MouseEvent) => {
+    if (!item.disable && isSelectable) {
+      const isMultiSelectMode = selectionMode === "multi" && (event.ctrlKey || event.metaKey);
+      const isRangeSelectMode = selectionMode === "multi" && event.shiftKey;
+
+      if (isMultiSelectMode) {
+        const selectState = getMultiSelectState(
+          item.id,
+          selectedItemIds || new Set(),
+          dataWithMeta,
+        );
+        // prevent selection of indirectly selected nodes in multi-select mode
+        if (selectState === "indirect") {
+          return;
+        }
+      }
+
+      let newSelectedIds: Set<string>;
+
+      if (isRangeSelectMode && lastSelectedId) {
+        if (selectedItemIds) {
+          newSelectedIds = new Set(selectedItemIds);
+          const rangeIds = getRangeIds(lastSelectedId, item.id, dataWithMeta);
+          rangeIds.forEach((id) => newSelectedIds.add(id));
+        } else {
+          newSelectedIds = new Set([item.id]);
+        }
+      } else if (isMultiSelectMode) {
+        if (selectedItemIds) {
+          newSelectedIds = new Set(selectedItemIds);
+          if (newSelectedIds.has(item.id)) {
+            newSelectedIds.delete(item.id);
+          } else {
+            newSelectedIds.add(item.id);
+          }
+        } else {
+          newSelectedIds = new Set([item.id]);
+        }
+      } else {
+        // Single select mode: clear other selections and select only current item
+        newSelectedIds = new Set([item.id]);
+      }
+
+      const cleanedSelectedIds = cleanIndirectSelectedNodes(newSelectedIds, dataWithMeta);
+
+      if (onSelectionChange) {
+        onSelectionChange(cleanedSelectedIds);
+        setLastSelectedId?.(item.id);
+      }
     }
   };
 
@@ -110,18 +181,65 @@ export function TreeEntryItem<T extends TreeDataItem>({
   const indent = item.indent || 0;
   const isLast = item.isLast !== undefined ? item.isLast : false;
 
-  return (
+  const getSelectState = () => {
+    if (selectedItemIds) {
+      return getMultiSelectState(item.id, selectedItemIds, dataWithMeta);
+    }
+    return "unselected";
+  };
+
+  const selectState = getSelectState();
+  const isSelected = selectState === "selected";
+  const isIndirectlySelected = selectState === "indirect";
+
+  const { hasPrevSelected, hasNextSelected } = getAdjacentSelectionState(
+    item.id,
+    selectedItemIds || new Set(),
+    dataWithMeta,
+  );
+
+  // Calculate border radius classes based on adjacent selection
+  const getBorderRadiusClass = () => {
+    if (!isSelectable || (!isSelected && !isIndirectlySelected)) {
+      return "rounded-uk-md";
+    }
+
+    // Remove top radius if previous item is selected, remove bottom radius if next item is selected
+    if (hasPrevSelected && hasNextSelected) {
+      return "";
+    } else if (hasPrevSelected) {
+      return "rounded-b-uk-md";
+    } else if (hasNextSelected) {
+      return "rounded-t-uk-md";
+    }
+
+    return "rounded-uk-md";
+  };
+
+  const handleContextMenuOpenChange = (open: boolean) => {
+    // If item is not selected when opening context menu, select it first
+    if (open && isSelectable && !isSelected && !isIndirectlySelected && onSelectionChange) {
+      onSelectionChange(new Set([item.id]));
+    }
+  };
+
+  const treeItemContent = (
     <div
       className={cn(
         "group relative flex h-[32px] items-center",
-        isSelectable && "rounded-uk-md",
-        !item.disable && "cursor-pointer",
+        getBorderRadiusClass(),
         hoveredId === item.id && !item.disable && "bg-bg-secondary",
-        isSelectable && selectedItemId === item.id && "bg-brand-primary text-text-withbg",
+        isSelectable && isSelected && "bg-brand-primary text-text-withbg",
+        isSelectable && isIndirectlySelected && "bg-shadow-secondary text-text-primary",
       )}
       onMouseEnter={() => onItemHover?.(item.id)}
       onMouseLeave={() => onItemHover?.(null)}
       onClick={handleItemSelect}
+      onMouseDown={(e) => {
+        if (e.shiftKey || e.ctrlKey || e.metaKey) {
+          e.preventDefault();
+        }
+      }}
     >
       {/* Guidelines */}
       <div className="absolute top-0 left-[-0.28rem] z-0 flex h-full items-center">
@@ -229,4 +347,15 @@ export function TreeEntryItem<T extends TreeDataItem>({
       </div>
     </div>
   );
+
+  if (renderContextMenu) {
+    return (
+      <ContextMenu onOpenChange={handleContextMenuOpenChange}>
+        <ContextMenuTrigger asChild>{treeItemContent}</ContextMenuTrigger>
+        {renderContextMenu(item)}
+      </ContextMenu>
+    );
+  }
+
+  return treeItemContent;
 }

package/src/ui/tree-view/hooks.tsx

@@ -2,6 +2,154 @@ import { useCallback, useMemo, useState } from "react";
 
 import { TreeDataItem, TreeDataItemWithMeta } from "./types";
 
+/**
+ * Get all descendant node IDs of a node
+ */
+export function getDescendantIds<T extends TreeDataItem>(
+  itemId: string,
+  data: TreeDataItemWithMeta<T>[],
+  childrenMap: Map<string | null, T[]>,
+): string[] {
+  const descendants: string[] = [];
+  const children = childrenMap.get(itemId) || [];
+
+  children.forEach((child) => {
+    descendants.push(child.id);
+    descendants.push(...getDescendantIds(child.id, data, childrenMap));
+  });
+
+  return descendants;
+}
+
+/**
+ * Get all ancestor node IDs of a node
+ */
+export function getAncestorIds<T extends TreeDataItem>(
+  itemId: string,
+  data: TreeDataItemWithMeta<T>[],
+): string[] {
+  const ancestors: string[] = [];
+  const dataMap = new Map(data.map((item) => [item.id, item]));
+  let current = dataMap.get(itemId)?.parentId;
+
+  while (current) {
+    ancestors.push(current);
+    current = dataMap.get(current)?.parentId;
+  }
+
+  return ancestors;
+}
+
+/**
+ * Check if a node is indirectly selected (parent node is selected)
+ */
+export function isIndirectlySelected<T extends TreeDataItem>(
+  itemId: string,
+  selectedIds: Set<string>,
+  data: TreeDataItemWithMeta<T>[],
+): boolean {
+  const ancestors = getAncestorIds(itemId, data);
+  return ancestors.some((ancestorId) => selectedIds.has(ancestorId));
+}
+
+/**
+ * Get multi-select state: selected, indirect, or unselected
+ */
+export function getMultiSelectState<T extends TreeDataItem>(
+  itemId: string,
+  selectedIds: Set<string>,
+  data: TreeDataItemWithMeta<T>[],
+): "selected" | "indirect" | "unselected" {
+  if (isIndirectlySelected(itemId, selectedIds, data)) {
+    return "indirect";
+  }
+  if (selectedIds.has(itemId)) {
+    return "selected";
+  }
+  return "unselected";
+}
+
+/**
+ * Get all node IDs for range selection (from lastSelectedId to currentId)
+ */
+export function getRangeIds<T extends TreeDataItem>(
+  lastSelectedId: string | null,
+  currentId: string,
+  data: TreeDataItemWithMeta<T>[],
+): string[] {
+  if (!lastSelectedId) {
+    return [currentId];
+  }
+
+  // Find the indices of both nodes in the data
+  const lastIndex = data.findIndex((item) => item.id === lastSelectedId);
+  const currentIndex = data.findIndex((item) => item.id === currentId);
+
+  if (lastIndex === -1 || currentIndex === -1) {
+    return [currentId];
+  }
+
+  // Get all node IDs within the range
+  const startIndex = Math.min(lastIndex, currentIndex);
+  const endIndex = Math.max(lastIndex, currentIndex);
+  const rangeIds: string[] = [];
+
+  for (let i = startIndex; i <= endIndex; i++) {
+    rangeIds.push(data[i].id);
+  }
+
+  return rangeIds;
+}
+
+/**
+ * Clean up indirectly selected child nodes, keep only directly selected nodes
+ */
+export function cleanIndirectSelectedNodes<T extends TreeDataItem>(
+  selectedIds: Set<string>,
+  data: TreeDataItemWithMeta<T>[],
+): Set<string> {
+  const cleanedIds = new Set<string>();
+
+  for (const id of selectedIds) {
+    // Check if this node is indirectly selected (i.e., its ancestor node is selected)
+    const isNodeIndirectlySelected = isIndirectlySelected(id, selectedIds, data);
+
+    // If this node is not indirectly selected, keep it
+    if (!isNodeIndirectlySelected) {
+      cleanedIds.add(id);
+    }
+  }
+
+  return cleanedIds;
+}
+
+/**
+ * Check if adjacent items are selected (directly or indirectly)
+ * Returns whether previous and next items are selected
+ */
+export function getAdjacentSelectionState<T extends TreeDataItem>(
+  itemId: string,
+  selectedIds: Set<string>,
+  data: TreeDataItemWithMeta<T>[],
+): { hasPrevSelected: boolean; hasNextSelected: boolean } {
+  const currentIndex = data.findIndex((item) => item.id === itemId);
+
+  if (currentIndex === -1) {
+    return { hasPrevSelected: false, hasNextSelected: false };
+  }
+
+  const prevIndex = currentIndex - 1;
+  const hasPrevSelected =
+    prevIndex >= 0 && getMultiSelectState(data[prevIndex].id, selectedIds, data) !== "unselected";
+
+  const nextIndex = currentIndex + 1;
+  const hasNextSelected =
+    nextIndex < data.length &&
+    getMultiSelectState(data[nextIndex].id, selectedIds, data) !== "unselected";
+
+  return { hasPrevSelected, hasNextSelected };
+}
+
 /**
  * Hook for managing tree search functionality
  */

package/src/ui/tree-view/types.ts

@@ -20,4 +20,4 @@ export type TreeDataItemWithMeta<T extends TreeDataItem> = T & {
   indent: number;
   isLast: boolean;
   ancestors: T[];
-};
+};

package/src/ui/waterfall/TimelineProcessBar.tsx

@@ -4,6 +4,8 @@ import { LogItemWithMeta } from "./types";
 import { borderColorClasses, colorClasses, formatDuration } from "./utils";
 import { cn } from "../../hooks";
 
+const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);
+
 export interface TimelineEventBarProps {
   item: LogItemWithMeta;
   isHovered: boolean;
@@ -188,17 +190,21 @@ export function TimelineProcessBar({
           const visibleDuration = visibleEnd - visibleStart;
           const visibleWidthPercent = (visibleDuration / viewWindow) * 100;
 
-          if (visibleWidthPercent < 8) return null;
-
           return (
             <div
-              className="pointer-events-none absolute top-1/2 flex -translate-y-1/2 items-center justify-center"
+              className="pointer-events-none absolute top-1/2 flex -translate-y-1/2 items-center justify-center overflow-hidden"
               style={{
                 left: `${timeToPercent(visibleStart)}%`,
                 width: `${visibleWidthPercent}%`,
+                zoom: clamp(visibleWidthPercent, 6, 12) / 12,
               }}
             >
-              <span className="text-text-secondary text-xs italic">Halted</span>
+              {visibleWidthPercent > 7 && (
+                <span className="rounded-full bg-orange-500 px-2 py-0.5 text-xs text-white">
+                  Halted
+                </span>
+              )}
+              {visibleWidthPercent < 7 && <span className="h-3 w-3 rounded-full bg-orange-500" />}
             </div>
           );
         })()}

package/dist/chunk-4F2GSF2T.mjs

@@ -1,29 +0,0 @@
-import React from 'react';
-
-// src/hooks/clientOnly.tsx
-function clientOnly(fn) {
-  if (typeof window !== "undefined") {
-    return fn();
-  }
-  return void 0;
-}
-function createClientOnlyComponent(Component, fallback) {
-  return function ClientOnlyWrapper(props) {
-    const [isClient2, setIsClient] = React.useState(false);
-    React.useEffect(() => {
-      setIsClient(true);
-    }, []);
-    if (!isClient2) {
-      return fallback ? React.createElement(fallback, props) : null;
-    }
-    return React.createElement(Component, props);
-  };
-}
-function isClient() {
-  return typeof window !== "undefined";
-}
-function isServer() {
-  return typeof window === "undefined";
-}
-
-export { clientOnly, createClientOnlyComponent, isClient, isServer };

package/dist/chunk-A6EASR27.mjs

@@ -1,193 +0,0 @@
-import { createClientOnlyComponent } from './chunk-4F2GSF2T.mjs';
-import { cn } from './chunk-T66ETI7E.mjs';
-import * as SheetPrimitive from '@radix-ui/react-dialog';
-import { XIcon } from 'lucide-react';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-
-function SheetRoot({ ...props }) {
-  return /* @__PURE__ */ jsx(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
-}
-function SheetFallback({ ...props }) {
-  return /* @__PURE__ */ jsx("div", { "data-slot": "sheet", ...props });
-}
-var Sheet = createClientOnlyComponent(SheetRoot, SheetFallback);
-function SheetTriggerRoot({ ...props }) {
-  return /* @__PURE__ */ jsx(SheetPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
-}
-function SheetTriggerFallback({
-  asChild,
-  children,
-  ...props
-}) {
-  if (asChild) {
-    return /* @__PURE__ */ jsx(Fragment, { children });
-  }
-  return /* @__PURE__ */ jsx("button", { "data-slot": "sheet-trigger", ...props, children });
-}
-var SheetTrigger = createClientOnlyComponent(SheetTriggerRoot, SheetTriggerFallback);
-function SheetCloseRoot({ ...props }) {
-  return /* @__PURE__ */ jsx(
-    SheetPrimitive.Close,
-    {
-      "data-slot": "sheet-close",
-      className: cn("focus:ring-0 focus:outline-none"),
-      ...props
-    }
-  );
-}
-function SheetCloseFallback({
-  asChild,
-  children,
-  ...props
-}) {
-  if (asChild) {
-    return /* @__PURE__ */ jsx(Fragment, { children });
-  }
-  return /* @__PURE__ */ jsx("button", { "data-slot": "sheet-close", className: cn("focus:ring-0 focus:outline-none"), ...props, children });
-}
-var SheetClose = createClientOnlyComponent(SheetCloseRoot, SheetCloseFallback);
-function SheetPortal({ ...props }) {
-  return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
-}
-function SheetOverlay({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    SheetPrimitive.Overlay,
-    {
-      "data-slot": "sheet-overlay",
-      className: cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-bg-mask fixed inset-0 z-50",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function SheetContentRoot({
-  className,
-  children,
-  side = "right",
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(SheetPortal, { children: [
-    /* @__PURE__ */ jsx(SheetOverlay, {}),
-    /* @__PURE__ */ jsxs(
-      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",
-          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]",
-          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]",
-          side === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto",
-          side === "bottom" && "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto",
-          className
-        ),
-        ...props,
-        children: [
-          children,
-          /* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "text-icon-primary hover:text-icon-highlight absolute top-4 right-4 disabled:pointer-events-none", children: [
-            /* @__PURE__ */ jsx(XIcon, { className: "size-4" }),
-            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-          ] })
-        ]
-      }
-    )
-  ] });
-}
-function SheetContentFallback({
-  className,
-  children,
-  side = "right",
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(
-    "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: [
-        children,
-        /* @__PURE__ */ jsxs("button", { className: "text-icon-primary hover:text-icon-highlight absolute top-4 right-4 disabled:pointer-events-none", children: [
-          /* @__PURE__ */ jsx(XIcon, { className: "size-4" }),
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-        ] })
-      ]
-    }
-  );
-}
-var SheetContent = createClientOnlyComponent(SheetContentRoot, SheetContentFallback);
-function SheetHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "sheet-header",
-      className: cn("gap-md pb-xl flex flex-col", className),
-      ...props
-    }
-  );
-}
-function SheetFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "sheet-footer",
-      className: cn("gap-lg pt-xl mt-auto flex flex-col", className),
-      ...props
-    }
-  );
-}
-function SheetTitleRoot({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    SheetPrimitive.Title,
-    {
-      "data-slot": "sheet-title",
-      className: cn("text-text-highlight text-uk-xl leading-uk-xl font-medium", className),
-      ...props
-    }
-  );
-}
-function SheetTitleFallback({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "h2",
-    {
-      "data-slot": "sheet-title",
-      className: cn("text-text-highlight text-uk-xl leading-uk-xl font-medium", className),
-      ...props
-    }
-  );
-}
-var SheetTitle = createClientOnlyComponent(SheetTitleRoot, SheetTitleFallback);
-function SheetDescriptionRoot({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    SheetPrimitive.Description,
-    {
-      "data-slot": "sheet-description",
-      className: cn("text-text-secondary text-uk-md leading-uk-md", className),
-      ...props
-    }
-  );
-}
-function SheetDescriptionFallback({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "p",
-    {
-      "data-slot": "sheet-description",
-      className: cn("text-text-secondary text-uk-md leading-uk-md", className),
-      ...props
-    }
-  );
-}
-var SheetDescription = createClientOnlyComponent(SheetDescriptionRoot, SheetDescriptionFallback);
-
-export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };