@vllnt/ui 0.1.4 → 0.1.7-canary.2c4792f

package/dist/components/theme-provider/index.js

@@ -0,0 +1,4 @@
+import { ThemeProvider } from "./theme-provider";
+export {
+  ThemeProvider
+};

package/dist/components/theme-provider/theme-provider.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import {
+  ThemeProvider as NextThemesProvider
+} from "next-themes";
+function ThemeProvider({ children, ...props }) {
+  return /* @__PURE__ */ jsx(NextThemesProvider, { ...props, children });
+}
+export {
+  ThemeProvider
+};

package/dist/components/theme-toggle/index.js

@@ -0,0 +1,4 @@
+import { ThemeToggle } from "./theme-toggle";
+export {
+  ThemeToggle
+};

package/dist/components/theme-toggle/theme-toggle.js

@@ -0,0 +1,170 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from "react";
+import { useTheme } from "next-themes";
+import { useMounted } from "../../lib/use-mounted";
+import { Button } from "../button/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "../dropdown-menu/dropdown-menu";
+function ThemeButton({
+  ariaLabel,
+  children,
+  icon,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      "aria-label": ariaLabel,
+      className: "bg-background text-foreground border border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500 transition-colors",
+      size: "icon",
+      variant: "outline",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-mono", children: icon }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: ariaLabel }),
+        children
+      ]
+    }
+  );
+}
+function ThemeMenuItem({
+  icon,
+  label,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuItem,
+    {
+      className: "hover:bg-accent cursor-pointer",
+      onClick,
+      children: [
+        icon,
+        " ",
+        label
+      ]
+    }
+  );
+}
+function ThemeToggle({ dict }) {
+  const { setTheme, theme } = useTheme();
+  const mounted = useMounted();
+  const [open, setOpen] = useState(false);
+  const closeTimerReference = useRef(null);
+  const isHoveringOverMenuAreaReference = useRef(false);
+  const clearCloseTimer = useCallback(() => {
+    if (closeTimerReference.current !== null) {
+      window.clearTimeout(closeTimerReference.current);
+      closeTimerReference.current = null;
+    }
+  }, []);
+  const scheduleClose = useCallback(() => {
+    clearCloseTimer();
+    closeTimerReference.current = window.setTimeout(() => {
+      setOpen(false);
+    }, 250);
+  }, [clearCloseTimer]);
+  const handleOpenChange = useCallback((nextOpen) => {
+    if (!nextOpen && isHoveringOverMenuAreaReference.current) {
+      return;
+    }
+    setOpen(nextOpen);
+  }, []);
+  const getThemeIcon = useCallback(() => {
+    if (!mounted) return "\u2600";
+    switch (theme) {
+      case "light":
+        return "\u2600";
+      case "dark":
+        return "\u263E";
+      case "system":
+        return "\u2699";
+      case void 0:
+        return "\u2699";
+      default:
+        return "\u2699";
+    }
+  }, [theme, mounted]);
+  const themeIcon = getThemeIcon();
+  const handleThemeChange = useCallback(
+    (newTheme) => {
+      setTheme(newTheme);
+    },
+    [setTheme]
+  );
+  if (!mounted) {
+    return /* @__PURE__ */ jsx(ThemeButton, { ariaLabel: dict.theme.toggle_theme, icon: "\u2600" });
+  }
+  return /* @__PURE__ */ jsxs(DropdownMenu, { modal: false, onOpenChange: handleOpenChange, open, children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      ThemeButton,
+      {
+        ariaLabel: dict.theme.toggle_theme,
+        icon: themeIcon,
+        onMouseEnter: () => {
+          isHoveringOverMenuAreaReference.current = true;
+          clearCloseTimer();
+          setOpen(true);
+        },
+        onMouseLeave: () => {
+          isHoveringOverMenuAreaReference.current = false;
+          scheduleClose();
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      DropdownMenuContent,
+      {
+        align: "end",
+        className: "bg-background border border-gray-300 dark:border-gray-600",
+        onMouseEnter: () => {
+          isHoveringOverMenuAreaReference.current = true;
+          clearCloseTimer();
+        },
+        onMouseLeave: () => {
+          isHoveringOverMenuAreaReference.current = false;
+          scheduleClose();
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            ThemeMenuItem,
+            {
+              icon: "\u2600",
+              label: dict.theme.light,
+              onClick: () => {
+                handleThemeChange("light");
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ThemeMenuItem,
+            {
+              icon: "\u263E",
+              label: dict.theme.dark,
+              onClick: () => {
+                handleThemeChange("dark");
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ThemeMenuItem,
+            {
+              icon: "\u2699",
+              label: dict.theme.system,
+              onClick: () => {
+                handleThemeChange("system");
+              }
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  ThemeToggle
+};

package/dist/components/thinking-block/index.js

@@ -0,0 +1,4 @@
+import { ThinkingBlock } from "./thinking-block";
+export {
+  ThinkingBlock
+};

package/dist/components/thinking-block/thinking-block.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useState } from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { cn } from "../../lib/utils";
+function ThinkingBlock({
+  className,
+  isStreaming = false,
+  thinking
+}) {
+  const [isExpanded, setIsExpanded] = useState(isStreaming);
+  const contentId = useId();
+  useEffect(() => {
+    if (isStreaming) {
+      requestAnimationFrame(() => {
+        setIsExpanded(true);
+      });
+    }
+  }, [isStreaming]);
+  const toggleExpanded = useCallback(() => {
+    setIsExpanded((previous) => !previous);
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { className: cn("mb-2", className), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        "aria-controls": contentId,
+        "aria-expanded": isExpanded,
+        className: "flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors",
+        onClick: toggleExpanded,
+        type: "button",
+        children: [
+          isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "Thinking",
+            isStreaming ? /* @__PURE__ */ jsx("span", { className: "ml-1 animate-pulse", children: "..." }) : null
+          ] })
+        ]
+      }
+    ),
+    isExpanded ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "mt-2 p-3 bg-muted/50 rounded text-xs text-muted-foreground whitespace-pre-wrap border-l-2 border-muted-foreground/30 max-h-48 overflow-y-auto",
+        id: contentId,
+        children: [
+          thinking,
+          isStreaming ? /* @__PURE__ */ jsx("span", { className: "animate-pulse", children: "|" }) : null
+        ]
+      }
+    ) : null
+  ] });
+}
+export {
+  ThinkingBlock
+};

package/dist/components/tldr-section/index.js

@@ -0,0 +1,4 @@
+import { TLDRSection } from "./tldr-section";
+export {
+  TLDRSection
+};

package/dist/components/tldr-section/tldr-section.js

@@ -0,0 +1,101 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+function TLDRSection({ children, label }) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [hasBeenOpened, setHasBeenOpened] = useState(false);
+  const timerReference = useRef(null);
+  useEffect(() => {
+    if (isExpanded && !hasBeenOpened) {
+      if (timerReference.current) {
+        clearTimeout(timerReference.current);
+      }
+      const rafId = requestAnimationFrame(() => {
+        setIsLoading(true);
+        setHasBeenOpened(true);
+      });
+      timerReference.current = setTimeout(() => {
+        setIsLoading(false);
+        timerReference.current = null;
+      }, 800);
+      return () => {
+        cancelAnimationFrame(rafId);
+        if (timerReference.current) {
+          clearTimeout(timerReference.current);
+          timerReference.current = null;
+        }
+      };
+    }
+    return () => {
+      if (timerReference.current) {
+        clearTimeout(timerReference.current);
+        timerReference.current = null;
+      }
+    };
+  }, [isExpanded]);
+  return /* @__PURE__ */ jsxs("div", { className: "my-8 rounded-lg border border-border bg-muted/30 overflow-hidden", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: "flex items-center justify-between w-full px-4 py-3 hover:bg-muted/50 transition-colors",
+        onClick: () => {
+          setIsExpanded(!isExpanded);
+        },
+        type: "button",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: "w-5 h-5 text-muted-foreground",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                viewBox: "0 0 24 24",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M4 6h16M4 12h16M4 18h16",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: label })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: `w-4 h-4 text-muted-foreground transition-transform ${isExpanded ? "rotate-180" : ""}`,
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              viewBox: "0 0 24 24",
+              xmlns: "http://www.w3.org/2000/svg",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M19 9l-7 7-7-7",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    isExpanded ? /* @__PURE__ */ jsx("div", { className: "px-4 pb-4 pt-2 border-t border-border", children: isLoading ? /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "relative h-4 bg-muted/50 rounded overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-amber-400/40 to-transparent animate-shimmer" }) }),
+      /* @__PURE__ */ jsx("div", { className: "relative h-4 bg-muted/50 rounded overflow-hidden w-5/6", children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-amber-400/40 to-transparent animate-shimmer" }) }),
+      /* @__PURE__ */ jsx("div", { className: "relative h-4 bg-muted/50 rounded overflow-hidden w-4/5", children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-amber-400/40 to-transparent animate-shimmer" }) }),
+      /* @__PURE__ */ jsx("div", { className: "relative h-4 bg-muted/50 rounded overflow-hidden w-3/4", children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-amber-400/40 to-transparent animate-shimmer" }) })
+    ] }) : /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground leading-relaxed", children }) }) : null
+  ] });
+}
+export {
+  TLDRSection
+};

package/dist/components/toast/index.js

@@ -0,0 +1,18 @@
+import {
+  Toast,
+  ToastAction,
+  ToastClose,
+  ToastDescription,
+  ToastTitle
+} from "./toast";
+import { Toaster } from "./toaster";
+import { toast } from "sonner";
+export {
+  Toast,
+  ToastAction,
+  ToastClose,
+  ToastDescription,
+  ToastTitle,
+  Toaster,
+  toast
+};

package/dist/components/toast/toast.js

@@ -0,0 +1,84 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    defaultVariants: {
+      variant: "default"
+    },
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive: "destructive border-destructive bg-destructive text-destructive-foreground"
+      }
+    }
+  }
+);
+const Toast = React.forwardRef(({ className, variant, ...props }, reference) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(toastVariants({ variant }), className),
+    ref: reference,
+    ...props
+  }
+));
+Toast.displayName = "Toast";
+const ToastAction = React.forwardRef(({ altText, className, ...props }, reference) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    className: cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className
+    ),
+    ref: reference,
+    type: "button",
+    ...props
+  }
+));
+ToastAction.displayName = "ToastAction";
+const ToastClose = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsxs(
+  "button",
+  {
+    className: cn(
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className
+    ),
+    "data-toast-close": "true",
+    ref: reference,
+    type: "button",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" }),
+      "\u2715"
+    ]
+  }
+));
+ToastClose.displayName = "ToastClose";
+const ToastTitle = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("text-sm font-semibold", className),
+    ref: reference,
+    ...props
+  }
+));
+ToastTitle.displayName = "ToastTitle";
+const ToastDescription = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("text-sm opacity-90", className),
+    ref: reference,
+    ...props
+  }
+));
+ToastDescription.displayName = "ToastDescription";
+export {
+  Toast,
+  ToastAction,
+  ToastClose,
+  ToastDescription,
+  ToastTitle
+};

package/dist/components/toast/toaster.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon
+} from "lucide-react";
+import { useTheme } from "next-themes";
+import { Toaster as Sonner } from "sonner";
+const Toaster = ({ ...props }) => {
+  const { theme = "system" } = useTheme();
+  return /* @__PURE__ */ jsx(
+    Sonner,
+    {
+      className: "toaster group",
+      icons: {
+        error: /* @__PURE__ */ jsx(OctagonXIcon, { className: "size-4" }),
+        info: /* @__PURE__ */ jsx(InfoIcon, { className: "size-4" }),
+        loading: /* @__PURE__ */ jsx(Loader2Icon, { className: "size-4 animate-spin" }),
+        success: /* @__PURE__ */ jsx(CircleCheckIcon, { className: "size-4" }),
+        warning: /* @__PURE__ */ jsx(TriangleAlertIcon, { className: "size-4" })
+      },
+      style: {
+        "--border-radius": "var(--radius)",
+        "--normal-bg": "var(--popover)",
+        "--normal-border": "var(--border)",
+        "--normal-text": "var(--popover-foreground)"
+      },
+      theme,
+      ...props
+    }
+  );
+};
+export {
+  Toaster
+};

package/dist/components/toggle/index.js

@@ -0,0 +1,5 @@
+import { Toggle, toggleVariants } from "./toggle";
+export {
+  Toggle,
+  toggleVariants
+};

package/dist/components/toggle/toggle.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    defaultVariants: {
+      size: "default",
+      variant: "default"
+    },
+    variants: {
+      size: {
+        default: "h-10 px-3 min-w-10",
+        lg: "h-11 px-5 min-w-11",
+        sm: "h-9 px-2.5 min-w-9"
+      },
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground"
+      }
+    }
+  }
+);
+const Toggle = forwardRef(({ className, size, variant, ...props }, ref) => /* @__PURE__ */ jsx(
+  TogglePrimitive.Root,
+  {
+    className: cn(toggleVariants({ className, size, variant })),
+    ref,
+    ...props
+  }
+));
+Toggle.displayName = TogglePrimitive.Root.displayName;
+export {
+  Toggle,
+  toggleVariants
+};

package/dist/components/toggle-group/index.js

@@ -0,0 +1,5 @@
+import { ToggleGroup, ToggleGroupItem } from "./toggle-group";
+export {
+  ToggleGroup,
+  ToggleGroupItem
+};

package/dist/components/toggle-group/toggle-group.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, useMemo } from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { cn } from "../../lib/utils";
+import { toggleVariants } from "../toggle/toggle";
+const ToggleGroupContext = createContext({
+  size: "default",
+  variant: "default"
+});
+const ToggleGroup = forwardRef(({ children, className, size, variant, ...props }, ref) => {
+  const contextValue = useMemo(() => ({ size, variant }), [size, variant]);
+  return /* @__PURE__ */ jsx(
+    ToggleGroupPrimitive.Root,
+    {
+      className: cn("flex items-center justify-center gap-1", className),
+      ref,
+      ...props,
+      children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: contextValue, children })
+    }
+  );
+});
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+const ToggleGroupItem = forwardRef(({ children, className, size, variant, ...props }, ref) => {
+  const context = useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx(
+    ToggleGroupPrimitive.Item,
+    {
+      className: cn(
+        toggleVariants({
+          size: context.size ?? size,
+          variant: context.variant ?? variant
+        }),
+        className
+      ),
+      ref,
+      ...props,
+      children
+    }
+  );
+});
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+export {
+  ToggleGroup,
+  ToggleGroupItem
+};

package/dist/components/tooltip/index.js

@@ -0,0 +1,12 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "./tooltip";
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+};

package/dist/components/tooltip/tooltip.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cn } from "../../lib/utils";
+const TooltipProvider = TooltipPrimitive.Provider;
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipContent = forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  TooltipPrimitive.Content,
+  {
+    className: cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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",
+      className
+    ),
+    ref,
+    sideOffset,
+    ...props
+  }
+) }));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+};

package/dist/components/truncated-text/index.js

@@ -0,0 +1,4 @@
+import { TruncatedText } from "./truncated-text";
+export {
+  TruncatedText
+};

package/dist/components/truncated-text/truncated-text.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+function TruncatedText({
+  children,
+  className,
+  maxWidth = "calc(100vw - 220px)"
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "inline-block align-middle overflow-hidden text-ellipsis whitespace-nowrap sm:max-w-none sm:overflow-visible",
+        className
+      ),
+      style: {
+        maxWidth
+      },
+      title: children,
+      children
+    }
+  );
+}
+export {
+  TruncatedText
+};