@gearbox-protocol/permissionless-ui 1.2.33 → 1.3.0

package/dist/cjs/components/page-title.js

@@ -0,0 +1,116 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var page_title_exports = {};
+__export(page_title_exports, {
+  PageTitle: () => PageTitle,
+  pageTitleRootVariants: () => pageTitleRootVariants,
+  pageTitleVariants: () => pageTitleVariants
+});
+module.exports = __toCommonJS(page_title_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_class_variance_authority = require("class-variance-authority");
+var React = __toESM(require("react"));
+var import_utils = __toESM(require('../utils/index.js'));
+const pageTitleVariants = (0, import_class_variance_authority.cva)(
+  "font-semibold leading-tight tracking-tight flex items-center gap-2",
+  {
+    variants: {
+      size: {
+        sm: "text-xl md:text-2xl",
+        default: "text-xl md:text-2xl",
+        lg: "text-3xl md:text-4xl",
+        xl: "text-4xl md:text-5xl"
+      },
+      variant: {
+        default: "text-foreground",
+        primary: "text-primary",
+        muted: "text-muted-foreground",
+        gradient: "bg-gradient-to-r from-primary to-purple-600 bg-clip-text text-transparent"
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      variant: "default"
+    }
+  }
+);
+const pageTitleRootVariants = (0, import_class_variance_authority.cva)("flex items-center", {
+  variants: {
+    spacing: {
+      sm: "gap-2",
+      default: "gap-4",
+      lg: "gap-6"
+    }
+  },
+  defaultVariants: {
+    spacing: "default"
+  }
+});
+const PageTitle = React.forwardRef(
+  ({
+    className,
+    size,
+    variant,
+    spacing,
+    backButton,
+    icon,
+    actions,
+    subtitle,
+    as: Component = "h1",
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, className: (0, import_utils.default)("w-full", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_utils.default)(pageTitleRootVariants({ spacing })), children: [
+      backButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-shrink-0", children: backButton }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-1 flex items-center gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-3 min-w-0", children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-shrink-0", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              Component,
+              {
+                className: (0, import_utils.default)(pageTitleVariants({ size, variant }), "m-0"),
+                children
+              }
+            ),
+            subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm text-muted-foreground mt-1", children: subtitle })
+          ] })
+        ] }),
+        actions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-shrink-0 flex items-center gap-2", children: actions })
+      ] })
+    ] }) });
+  }
+);
+PageTitle.displayName = "PageTitle";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PageTitle,
+  pageTitleRootVariants,
+  pageTitleVariants
+});

package/dist/cjs/components/percent-indicator.js

@@ -0,0 +1,56 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var percent_indicator_exports = {};
+__export(percent_indicator_exports, {
+  PercentIndicator: () => PercentIndicator
+});
+module.exports = __toCommonJS(percent_indicator_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_utils = __toESM(require('../utils/index.js'));
+var import_format_money = require('../utils/format-money.js');
+function PercentIndicator({
+  percent,
+  decimals = 2,
+  showColor = true,
+  className,
+  ...props
+}) {
+  const getColorClass = () => {
+    if (!showColor) return "";
+    if (percent >= 90) return "text-destructive";
+    if (percent >= 70) return "text-orange-500";
+    if (percent >= 50) return "text-yellow-600";
+    return "text-green-600";
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_utils.default)("font-medium", getColorClass(), className), ...props, children: (0, import_format_money.percentTemplate)(percent, decimals) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PercentIndicator
+});

package/dist/cjs/components/pool-points-indicator.js

@@ -0,0 +1,107 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var pool_points_indicator_exports = {};
+__export(pool_points_indicator_exports, {
+  PoolPointsIndicator: () => PoolPointsIndicator
+});
+module.exports = __toCommonJS(pool_points_indicator_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_utils = __toESM(require('../utils/index.js'));
+const COLOR_MAP = {
+  primary: "border-primary bg-primary",
+  secondary: "border-secondary bg-secondary",
+  green: "border-green-600 bg-green-600",
+  blue: "border-blue-600 bg-blue-600",
+  yellow: "border-yellow-600 bg-yellow-600"
+};
+function PoolPointsIndicator({
+  size = 24,
+  color = "primary",
+  className,
+  children
+}) {
+  const borderSize = size + 8;
+  const colorClasses = COLOR_MAP[color];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_utils.default)("relative inline-block", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: (0, import_utils.default)(
+          "absolute flex items-center justify-center rounded-full border-2",
+          colorClasses.split(" ")[0]
+          // border color
+        ),
+        style: {
+          top: -4,
+          left: -4,
+          width: borderSize,
+          height: borderSize
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: (0, import_utils.default)(
+          "absolute flex items-center justify-center rounded-full",
+          colorClasses.split(" ")[1]
+        ),
+        style: {
+          top: -6,
+          right: -6,
+          width: 14,
+          height: 14,
+          zIndex: 1
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "svg",
+          {
+            width: "8",
+            height: "8",
+            viewBox: "0 0 8 8",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            className: "text-white",
+            role: "img",
+            "aria-label": "Pool Points Indicator",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("title", { children: "Pool Points" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4.5 0L1 4.5h2.5L3 8l3.5-4.5H4L4.5 0z", fill: "currentColor" })
+            ]
+          }
+        )
+      }
+    ),
+    children
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PoolPointsIndicator
+});

package/dist/cjs/components/search-line.js

@@ -0,0 +1,225 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var search_line_exports = {};
+__export(search_line_exports, {
+  SearchLine: () => SearchLine,
+  WithSearchLine: () => WithSearchLine,
+  searchLineInputVariants: () => searchLineInputVariants,
+  searchLineVariants: () => searchLineVariants
+});
+module.exports = __toCommonJS(search_line_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_class_variance_authority = require("class-variance-authority");
+var import_lucide_react = require("lucide-react");
+var React = __toESM(require("react"));
+var import_utils = __toESM(require('../utils/index.js'));
+var import_input = require('./input.js');
+const searchLineVariants = (0, import_class_variance_authority.cva)("relative w-full transition-all duration-200", {
+  variants: {
+    size: {
+      sm: "max-w-xs",
+      default: "max-w-md",
+      lg: "max-w-lg",
+      full: "max-w-full"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+const searchLineInputVariants = (0, import_class_variance_authority.cva)("transition-all duration-200 pr-10", {
+  variants: {
+    active: {
+      true: "",
+      false: "bg-transparent border-input"
+    },
+    theme: {
+      light: "",
+      dark: ""
+    }
+  },
+  compoundVariants: [
+    {
+      active: true,
+      theme: "light",
+      className: "bg-card text-foreground"
+    },
+    {
+      active: true,
+      theme: "dark",
+      className: "bg-[rgb(40,40,40)] text-white"
+    },
+    {
+      active: false,
+      theme: "light",
+      className: "text-foreground placeholder:text-foreground"
+    },
+    {
+      active: false,
+      theme: "dark",
+      className: "text-white placeholder:text-white"
+    }
+  ],
+  defaultVariants: {
+    active: false,
+    theme: "light"
+  }
+});
+const SearchLine = React.forwardRef(
+  ({
+    className,
+    size,
+    searchState,
+    placeholder = "Search...",
+    theme = "light",
+    showSearchIcon = false,
+    customIcon,
+    onSubmit,
+    ...props
+  }, ref) => {
+    const { value, handleSubmit, handleInput, loading } = searchState;
+    const [focused, setFocused] = React.useState(false);
+    const active = value !== "" || focused;
+    const handleFormSubmit = React.useCallback(
+      (e) => {
+        e.preventDefault();
+        handleSubmit({ preventDefault: () => {
+        } });
+        if (onSubmit) {
+          onSubmit(value);
+        }
+      },
+      [handleSubmit, onSubmit, value]
+    );
+    const handleIconClick = React.useCallback(() => {
+      handleSubmit({ preventDefault: () => {
+      } });
+      if (onSubmit) {
+        onSubmit(value);
+      }
+    }, [handleSubmit, onSubmit, value]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref,
+        className: (0, import_utils.default)(searchLineVariants({ size }), className),
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "form",
+          {
+            onSubmit: handleFormSubmit,
+            onFocus: () => setFocused(true),
+            onBlur: () => setFocused(false),
+            className: "relative",
+            children: [
+              showSearchIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_lucide_react.Search,
+                {
+                  className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground pointer-events-none",
+                  size: 18
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_input.Input,
+                {
+                  type: "search",
+                  placeholder,
+                  value,
+                  onChange: handleInput,
+                  className: (0, import_utils.default)(
+                    searchLineInputVariants({ active, theme }),
+                    showSearchIcon && "pl-10"
+                  )
+                }
+              ),
+              active && !loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleIconClick,
+                  className: "absolute right-2 top-1/2 transform -translate-y-1/2 w-9 h-9 flex items-center justify-center rounded-full transition-colors cursor-pointer",
+                  "aria-label": "Submit search",
+                  children: customIcon || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowRight, { className: "text-primary", size: 18 })
+                }
+              ),
+              loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute right-2 top-1/2 transform -translate-y-1/2 w-9 h-9 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_lucide_react.Loader2,
+                {
+                  className: "text-muted-foreground animate-spin",
+                  size: 18
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+SearchLine.displayName = "SearchLine";
+const WithSearchLine = React.forwardRef(
+  ({
+    searchState,
+    children,
+    placeholder = "Search...",
+    theme = "light",
+    className
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        ref,
+        className: (0, import_utils.default)(
+          "w-full flex gap-4 flex-col sm:flex-row sm:items-center md:justify-between",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sm:flex-shrink-0 sm:flex-grow-1", children }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-full sm:flex-1 md:flex-initial md:max-w-md", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            SearchLine,
+            {
+              searchState,
+              placeholder,
+              theme,
+              size: "full"
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+WithSearchLine.displayName = "WithSearchLine";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SearchLine,
+  WithSearchLine,
+  searchLineInputVariants,
+  searchLineVariants
+});

package/dist/cjs/components/select.js

@@ -37,25 +37,45 @@ __export(select_exports, {
   SelectScrollUpButton: () => SelectScrollUpButton,
   SelectSeparator: () => SelectSeparator,
   SelectTrigger: () => SelectTrigger,
-  SelectValue: () => SelectValue
+  SelectValue: () => SelectValue,
+  selectTriggerVariants: () => selectTriggerVariants
 });
 module.exports = __toCommonJS(select_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var SelectPrimitive = __toESM(require("@radix-ui/react-select"));
+var import_class_variance_authority = require("class-variance-authority");
 var import_lucide_react = require("lucide-react");
 var React = __toESM(require("react"));
 var import_utils = __toESM(require('../utils/index.js'));
 const Select = SelectPrimitive.Root;
 const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
-const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+const selectTriggerVariants = (0, import_class_variance_authority.cva)(
+  "flex w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 bg-[rgb(40,40,40)] text-white",
+  {
+    variants: {
+      size: {
+        sm: "h-8 text-xs px-2",
+        default: "h-9",
+        lg: "h-11 text-base px-4"
+      },
+      variant: {
+        default: "",
+        error: "border-red-500",
+        success: "border-green-500"
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      variant: "default"
+    }
+  }
+);
+const SelectTrigger = React.forwardRef(({ className, children, size, variant, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
   SelectPrimitive.Trigger,
   {
     ref,
-    className: (0, import_utils.default)(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 bg-[rgb(40,40,40)] text-white border-[rgb(100,100,100)]",
-      className
-    ),
+    className: (0, import_utils.default)(selectTriggerVariants({ size, variant, className })),
     ...props,
     children: [
       children,
@@ -95,7 +115,7 @@ const SelectContent = React.forwardRef(({ className, children, position = "poppe
   {
     ref,
     className: (0, import_utils.default)(
-      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-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-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-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",
       position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
       className
     ),
@@ -132,7 +152,7 @@ const SelectItem = React.forwardRef(({ className, children, ...props }, ref) =>
   {
     ref,
     className: (0, import_utils.default)(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 bg-[rgb(40,40,40)] text-white border-[rgb(100,100,100)]",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none hover:bg-secondary focus:bg-secondary data-[disabled]:pointer-events-none data-[disabled]:opacity-50 bg-transparent text-white border-[rgb(100,100,100)]",
       className
     ),
     ...props,
@@ -163,5 +183,6 @@ SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
   SelectScrollUpButton,
   SelectSeparator,
   SelectTrigger,
-  SelectValue
+  SelectValue,
+  selectTriggerVariants
 });

package/dist/cjs/components/short-string.js

@@ -0,0 +1,58 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var short_string_exports = {};
+__export(short_string_exports, {
+  ShortString: () => ShortString
+});
+module.exports = __toCommonJS(short_string_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_cn = require('../utils/cn.js');
+var import_tooltip = require('./tooltip.js');
+function ShortString({
+  children,
+  maxLength,
+  className,
+  showTooltip = true
+}) {
+  if (maxLength === void 0) {
+    const content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_cn.cn)("inline-block max-w-full truncate", className), children });
+    if (!showTooltip) {
+      return content;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tooltip.Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.TooltipTrigger, { asChild: true, children: content }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.TooltipContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children }) })
+    ] }) });
+  }
+  if (!children || children.length <= maxLength) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className, children });
+  }
+  const truncated = `${children.slice(0, maxLength)}...`;
+  if (!showTooltip) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className, children: truncated });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tooltip.Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className, children: truncated }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.TooltipContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children }) })
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ShortString
+});