@structyl/styled 1.0.0 → 1.1.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2026 your-lib contributors
+Copyright (c) 2026 Mohammed Irfanul Alam Tanveer
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -125,11 +125,11 @@ The package re-exports a large catalog of components. Highlights:
 | `Table`, `Chart`, `Timeline`, `Stat`, `Rating`, `Typography` | Mixed | Data display and content. |
 | `buttonVariants`, `alertVariants` | Function | `tailwind-variants` helpers for composing class names. |
 
-Component prop types are re-exported alongside each component (for example `ButtonProps`, `DialogContentProps`, `SelectRootProps`). See the [full reference](https://structyl.dev) for every export and prop.
+Component prop types are re-exported alongside each component (for example `ButtonProps`, `DialogContentProps`, `SelectRootProps`). See the [full reference](https://www.structyl.com) for every export and prop.
 
 ## Part of structyl
 
-This package is part of [structyl](https://github.com/imirfanul/structyl) — the React UI library with structure. Full documentation lives at [structyl.dev](https://structyl.dev).
+This package is part of [structyl](https://github.com/imirfanul/structyl) — the React UI library with structure. Full documentation lives at [www.structyl.com](https://www.structyl.com).
 
 ## License
 

package/dist/index.cjs

@@ -305,25 +305,30 @@ var buttonVariants = tailwindVariants.tv({
   ],
   defaultVariants: { variant: "default", size: "default" }
 });
-var ButtonSpinner = ({ className }) => /* @__PURE__ */ React44__namespace.createElement(
-  "svg",
-  {
-    className: utils.cn("animate-spin", className),
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    "aria-hidden": true
-  },
-  /* @__PURE__ */ React44__namespace.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-  /* @__PURE__ */ React44__namespace.createElement(
-    "path",
+var ButtonSpinner = React44__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ React44__namespace.createElement(
+    "svg",
     {
-      className: "opacity-75",
-      fill: "currentColor",
-      d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-    }
+      ref,
+      className: utils.cn("animate-spin", className),
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      "aria-hidden": true,
+      ...props
+    },
+    /* @__PURE__ */ React44__namespace.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+    /* @__PURE__ */ React44__namespace.createElement(
+      "path",
+      {
+        className: "opacity-75",
+        fill: "currentColor",
+        d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+      }
+    )
   )
 );
+ButtonSpinner.displayName = "ButtonSpinner";
 var Button = React44__namespace.forwardRef(
   ({ className, variant, size, color, asChild = false, loading = false, loadingText, leftIcon, rightIcon, disabled, children, ...props }, ref) => {
     const isDisabled = disabled || loading;
@@ -892,19 +897,27 @@ var skeletonVariants = tailwindVariants.tv({
 var Skeleton = React44__namespace.forwardRef(
   ({ className, variant, shape, width, height, lines, style, ...props }, ref) => {
     if (lines && lines > 1) {
-      return /* @__PURE__ */ React44__namespace.createElement("div", { className: "flex flex-col gap-2" }, Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ React44__namespace.createElement(
+      return /* @__PURE__ */ React44__namespace.createElement(
         "div",
         {
-          key: i,
-          "aria-hidden": true,
-          className: utils.cn(
-            skeletonVariants({ variant, shape: "text" }),
-            i === lines - 1 && "w-4/5",
-            className
-          ),
-          style: { width: i === lines - 1 ? void 0 : width, height, ...style }
-        }
-      )));
+          ref,
+          className: utils.cn("flex flex-col gap-2", className),
+          style,
+          ...props
+        },
+        Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ React44__namespace.createElement(
+          "div",
+          {
+            key: i,
+            "aria-hidden": true,
+            className: utils.cn(
+              skeletonVariants({ variant, shape: "text" }),
+              i === lines - 1 && "w-4/5"
+            ),
+            style: { width: i === lines - 1 ? void 0 : width, height }
+          }
+        ))
+      );
     }
     return /* @__PURE__ */ React44__namespace.createElement(
       "div",
@@ -2087,7 +2100,8 @@ var Pagination = React44__namespace.forwardRef(
     onPageSizeChange,
     pageSizeOptions = [10, 25, 50, 100],
     showTotalRows = true,
-    className
+    className,
+    ...rest
   }, ref) => {
     const totalPages = Math.max(pageCount, 1);
     const canPrev = page > 1;
@@ -2107,7 +2121,8 @@ var Pagination = React44__namespace.forwardRef(
         className: utils.cn(
           "flex flex-col gap-3 py-3 sm:flex-row sm:items-center sm:justify-between",
           className
-        )
+        ),
+        ...rest
       },
       /* @__PURE__ */ React44__namespace.createElement("div", { className: "text-muted-foreground flex flex-wrap items-center gap-4 text-sm" }, showTotalRows && totalRows !== void 0 && /* @__PURE__ */ React44__namespace.createElement("span", { className: "tabular-nums" }, totalRows, " total rows"), onPageSizeChange && /* @__PURE__ */ React44__namespace.createElement("label", { className: "flex items-center gap-2" }, /* @__PURE__ */ React44__namespace.createElement("span", { className: "whitespace-nowrap" }, "Rows per page"), /* @__PURE__ */ React44__namespace.createElement(
         Root12,
@@ -2657,10 +2672,11 @@ var Tooltip = ({
   variant,
   maxWidth,
   arrow,
-  disabled
+  disabled,
+  ...triggerProps
 }) => {
   if (disabled) return /* @__PURE__ */ React44__namespace.createElement(React44__namespace.Fragment, null, children);
-  return /* @__PURE__ */ React44__namespace.createElement(Primitives.Tooltip.Provider, { delayDuration, skipDelayDuration }, /* @__PURE__ */ React44__namespace.createElement(Root18, null, /* @__PURE__ */ React44__namespace.createElement(Trigger10, { asChild: true }, children), /* @__PURE__ */ React44__namespace.createElement(Content12, { side, align, variant, maxWidth, arrow }, label)));
+  return /* @__PURE__ */ React44__namespace.createElement(Primitives.Tooltip.Provider, { delayDuration, skipDelayDuration }, /* @__PURE__ */ React44__namespace.createElement(Root18, null, /* @__PURE__ */ React44__namespace.createElement(Trigger10, { asChild: true, ...triggerProps }, children), /* @__PURE__ */ React44__namespace.createElement(Content12, { side, align, variant, maxWidth, arrow }, label)));
 };
 Tooltip.displayName = "Tooltip";
 
@@ -2922,7 +2938,8 @@ function Toaster({
   horizontal: defaultH = "right",
   vertical: defaultV = "bottom",
   maxToasts = 5,
-  className
+  className,
+  ...props
 }) {
   const { toasts, remove: remove2 } = useToast();
   const groups = React44__namespace.useMemo(() => {
@@ -2966,6 +2983,7 @@ function Toaster({
   }), /* @__PURE__ */ React44__namespace.createElement(
     Primitives.Toast.Viewport,
     {
+      ...props,
       className: utils.cn(
         "fixed z-[100] flex max-h-screen w-full p-4 md:max-w-[420px] gap-2",
         getViewportClasses(h, v),
@@ -5459,8 +5477,10 @@ var DatePickerRoot = React44__namespace.forwardRef(
     loading,
     showOutsideDays,
     showDaysOutsideCurrentMonth,
+    rootProps,
     ...props
   }, ref) => {
+    const { className: rootClassName, ...restRootProps } = rootProps ?? {};
     const generatedId = React44__namespace.useId();
     const triggerId = id ?? generatedId;
     const helperId = helperText ? `${triggerId}-helper` : void 0;
@@ -5474,36 +5494,46 @@ var DatePickerRoot = React44__namespace.forwardRef(
         locale,
         loading
       },
-      /* @__PURE__ */ React44__namespace.createElement("div", { ref, className: utils.cn("grid w-fit gap-1.5", className) }, label ? /* @__PURE__ */ React44__namespace.createElement("label", { className: "text-sm font-medium text-foreground", htmlFor: triggerId }, label, required ? /* @__PURE__ */ React44__namespace.createElement("span", { "aria-hidden": "true" }, " *") : null) : null, /* @__PURE__ */ React44__namespace.createElement(
-        Trigger17,
+      /* @__PURE__ */ React44__namespace.createElement(
+        "div",
         {
-          id: triggerId,
-          name,
-          disabled: disabled || disableOpenPicker,
-          autoFocus,
-          "aria-invalid": error || void 0,
-          "aria-describedby": helperId,
-          "aria-label": labelText ?? "Choose date",
-          className: triggerClassName
+          ...restRootProps,
+          ref,
+          className: utils.cn("grid w-fit gap-1.5", className, rootClassName)
         },
+        label ? /* @__PURE__ */ React44__namespace.createElement("label", { className: "text-sm font-medium text-foreground", htmlFor: triggerId }, label, required ? /* @__PURE__ */ React44__namespace.createElement("span", { "aria-hidden": "true" }, " *") : null) : null,
         /* @__PURE__ */ React44__namespace.createElement(
-          Primitives.DatePicker.Value,
+          Trigger17,
           {
-            locale,
-            format,
-            formatDensity,
-            placeholder: placeholder ?? "MM/DD/YYYY"
-          }
-        )
-      ), helperText ? /* @__PURE__ */ React44__namespace.createElement(
-        Typography2,
-        {
-          id: helperId,
-          variant: "muted",
-          className: utils.cn("text-xs", error && "text-destructive")
-        },
-        helperText
-      ) : null),
+            id: triggerId,
+            name,
+            disabled: disabled || disableOpenPicker,
+            autoFocus,
+            "aria-invalid": error || void 0,
+            "aria-describedby": helperId,
+            "aria-label": labelText ?? "Choose date",
+            className: triggerClassName
+          },
+          /* @__PURE__ */ React44__namespace.createElement(
+            Primitives.DatePicker.Value,
+            {
+              locale,
+              format,
+              formatDensity,
+              placeholder: placeholder ?? "MM/DD/YYYY"
+            }
+          )
+        ),
+        helperText ? /* @__PURE__ */ React44__namespace.createElement(
+          Typography2,
+          {
+            id: helperId,
+            variant: "muted",
+            className: utils.cn("text-xs", error && "text-destructive")
+          },
+          helperText
+        ) : null
+      ),
       /* @__PURE__ */ React44__namespace.createElement(Content20, { className: contentClassName }, loading ? /* @__PURE__ */ React44__namespace.createElement("div", { className: "p-4 text-sm text-muted-foreground" }, /* @__PURE__ */ React44__namespace.createElement(Loading2, null)) : /* @__PURE__ */ React44__namespace.createElement(
         Calendar2,
         {
@@ -5552,7 +5582,9 @@ var Segment = React44__namespace.forwardRef(({ className, ...props }, ref) => /*
 ));
 Segment.displayName = "TimePicker.Segment";
 var Value4 = Primitives.TimePicker.Value;
-var Separator10 = ({ children = ":" }) => /* @__PURE__ */ React44__namespace.createElement("span", { className: "text-muted-foreground" }, children);
+var Separator10 = React44__namespace.forwardRef(
+  ({ className, children = ":", ...props }, ref) => /* @__PURE__ */ React44__namespace.createElement("span", { ref, className: utils.cn("text-muted-foreground", className), ...props }, children)
+);
 Separator10.displayName = "TimePicker.Separator";
 var TimePickerPanel = React44__namespace.forwardRef(
   ({
@@ -5870,8 +5902,10 @@ var TimePickerRoot = React44__namespace.forwardRef(
     locale,
     referenceDate,
     views,
+    rootProps,
     ...props
   }, ref) => {
+    const { className: rootClassName, ...restRootProps } = rootProps ?? {};
     const generatedId = React44__namespace.useId();
     const triggerId = id ?? generatedId;
     const helperId = helperText ? `${triggerId}-helper` : void 0;
@@ -5921,7 +5955,7 @@ var TimePickerRoot = React44__namespace.forwardRef(
         shouldDisableTime
       ]
     );
-    return /* @__PURE__ */ React44__namespace.createElement(Root17, { open, onOpenChange: setOpen }, /* @__PURE__ */ React44__namespace.createElement("div", { ref, className: utils.cn("grid w-fit gap-1.5", className) }, label ? /* @__PURE__ */ React44__namespace.createElement("label", { className: "text-sm font-medium text-foreground", htmlFor: triggerId, suppressHydrationWarning: true }, label, required ? /* @__PURE__ */ React44__namespace.createElement("span", { "aria-hidden": "true" }, " *") : null) : null, /* @__PURE__ */ React44__namespace.createElement(Trigger9, { asChild: true }, /* @__PURE__ */ React44__namespace.createElement(
+    return /* @__PURE__ */ React44__namespace.createElement(Root17, { open, onOpenChange: setOpen }, /* @__PURE__ */ React44__namespace.createElement("div", { ...restRootProps, ref, className: utils.cn("grid w-fit gap-1.5", className, rootClassName) }, label ? /* @__PURE__ */ React44__namespace.createElement("label", { className: "text-sm font-medium text-foreground", htmlFor: triggerId, suppressHydrationWarning: true }, label, required ? /* @__PURE__ */ React44__namespace.createElement("span", { "aria-hidden": "true" }, " *") : null) : null, /* @__PURE__ */ React44__namespace.createElement(Trigger9, { asChild: true }, /* @__PURE__ */ React44__namespace.createElement(
       Button,
       {
         id: triggerId,
@@ -6401,42 +6435,53 @@ var DateRangePickerRoot = React44__namespace.forwardRef(
     shortcutsClassName,
     showOutsideDays,
     showDaysOutsideCurrentMonth,
+    rootProps,
     ...props
   }, ref) => {
     const generatedId = React44__namespace.useId();
     const triggerId = id ?? generatedId;
     const helperId = helperText ? `${triggerId}-helper` : void 0;
     const labelText = typeof label === "string" ? label : void 0;
-    return /* @__PURE__ */ React44__namespace.createElement(Root33, { ...props, disabled, readOnly, locale, loading }, /* @__PURE__ */ React44__namespace.createElement("div", { ref, className: utils.cn("grid w-fit gap-1.5", className) }, label ? /* @__PURE__ */ React44__namespace.createElement("label", { className: "text-sm font-medium text-foreground", htmlFor: triggerId }, label, required ? /* @__PURE__ */ React44__namespace.createElement("span", { "aria-hidden": "true" }, " *") : null) : null, /* @__PURE__ */ React44__namespace.createElement(
-      Trigger18,
+    return /* @__PURE__ */ React44__namespace.createElement(Root33, { ...props, disabled, readOnly, locale, loading }, /* @__PURE__ */ React44__namespace.createElement(
+      "div",
       {
-        id: triggerId,
-        name,
-        disabled,
-        "aria-invalid": error || void 0,
-        "aria-describedby": helperId,
-        "aria-label": labelText ?? "Choose date range",
-        className: triggerClassName
+        ref,
+        ...rootProps,
+        className: utils.cn("grid w-fit gap-1.5", className, rootProps?.className)
       },
+      label ? /* @__PURE__ */ React44__namespace.createElement("label", { className: "text-sm font-medium text-foreground", htmlFor: triggerId }, label, required ? /* @__PURE__ */ React44__namespace.createElement("span", { "aria-hidden": "true" }, " *") : null) : null,
       /* @__PURE__ */ React44__namespace.createElement(
-        Primitives.DateRangePicker.Value,
+        Trigger18,
         {
-          locale,
-          format,
-          formatDensity,
-          separator,
-          placeholder: placeholder ?? "MM/DD/YYYY - MM/DD/YYYY"
-        }
-      )
-    ), helperText ? /* @__PURE__ */ React44__namespace.createElement(
-      Typography2,
-      {
-        id: helperId,
-        variant: "muted",
-        className: utils.cn("text-xs", error && "text-destructive")
-      },
-      helperText
-    ) : null), /* @__PURE__ */ React44__namespace.createElement(
+          id: triggerId,
+          name,
+          disabled,
+          "aria-invalid": error || void 0,
+          "aria-describedby": helperId,
+          "aria-label": labelText ?? "Choose date range",
+          className: triggerClassName
+        },
+        /* @__PURE__ */ React44__namespace.createElement(
+          Primitives.DateRangePicker.Value,
+          {
+            locale,
+            format,
+            formatDensity,
+            separator,
+            placeholder: placeholder ?? "MM/DD/YYYY - MM/DD/YYYY"
+          }
+        )
+      ),
+      helperText ? /* @__PURE__ */ React44__namespace.createElement(
+        Typography2,
+        {
+          id: helperId,
+          variant: "muted",
+          className: utils.cn("text-xs", error && "text-destructive")
+        },
+        helperText
+      ) : null
+    ), /* @__PURE__ */ React44__namespace.createElement(
       Content21,
       {
         calendars,
@@ -6518,7 +6563,9 @@ var Segment2 = React44__namespace.forwardRef(({ className, ...props }, ref) => /
   }
 ));
 Segment2.displayName = "DateTimePicker.Segment";
-var Separator11 = ({ children = ":" }) => /* @__PURE__ */ React44__namespace.createElement("span", { className: "text-muted-foreground" }, children);
+var Separator11 = React44__namespace.forwardRef(
+  ({ className, children = ":", ...props }, ref) => /* @__PURE__ */ React44__namespace.createElement("span", { ref, className: utils.cn("text-muted-foreground", className), ...props }, children)
+);
 Separator11.displayName = "DateTimePicker.Separator";
 var Trigger19 = React44__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React44__namespace.createElement(
   Primitives.DateTimePicker.Trigger,
@@ -6606,6 +6653,64 @@ var Content22 = React44__namespace.forwardRef(
   ))
 );
 Content22.displayName = "DateTimePicker.Content";
+var DATE_TIME_PICKER_ROOT_CONFIG_KEYS = [
+  "value",
+  "defaultValue",
+  "onChange",
+  "onValueChange",
+  "onAccept",
+  "onError",
+  "open",
+  "defaultOpen",
+  "onOpenChange",
+  "onOpen",
+  "onClose",
+  "closeOnSelect",
+  "minDate",
+  "maxDate",
+  "minDateTime",
+  "maxDateTime",
+  "disablePast",
+  "disableFuture",
+  "disabledDays",
+  "shouldDisableDate",
+  "shouldDisableMonth",
+  "shouldDisableYear",
+  "weekStartsOn",
+  "ampmInClock",
+  "dayOfWeekFormatter",
+  "desktopModeMediaQuery",
+  "disableHighlightToday",
+  "disableIgnoringDatePartForTimeValidation",
+  "displayWeekNumber",
+  "fixedWeekNumber",
+  "formatDensity",
+  "inputRef",
+  "keepOpenDuringFieldFocus",
+  "localeText",
+  "monthsPerRow",
+  "onMonthChange",
+  "onSelectedSectionsChange",
+  "onViewChange",
+  "onYearChange",
+  "openTo",
+  "orientation",
+  "reduceAnimations",
+  "referenceDate",
+  "renderLoading",
+  "selectedSections",
+  "defaultSelectedSections",
+  "slotProps",
+  "slots",
+  "sx",
+  "thresholdToRenderTimeInASingleColumn",
+  "timezone",
+  "view",
+  "defaultView",
+  "viewRenderers",
+  "yearsOrder",
+  "yearsPerRow"
+];
 var DateTimePickerRoot = React44__namespace.forwardRef(
   ({
     className,
@@ -6643,10 +6748,20 @@ var DateTimePickerRoot = React44__namespace.forwardRef(
     const helperId = helperText ? `${triggerId}-helper` : void 0;
     const labelText = typeof label === "string" ? label : void 0;
     const withSeconds = (timeSteps?.seconds ?? 0) > 0;
+    const rootConfigKeys = new Set(DATE_TIME_PICKER_ROOT_CONFIG_KEYS);
+    const rootConfigProps = {};
+    const nativeDivProps = {};
+    for (const [key, value] of Object.entries(props)) {
+      if (rootConfigKeys.has(key)) {
+        rootConfigProps[key] = value;
+      } else {
+        nativeDivProps[key] = value;
+      }
+    }
     return /* @__PURE__ */ React44__namespace.createElement(
       Root34,
       {
-        ...props,
+        ...rootConfigProps,
         disabled,
         readOnly,
         locale,
@@ -6660,7 +6775,7 @@ var DateTimePickerRoot = React44__namespace.forwardRef(
         timeSteps,
         views
       },
-      /* @__PURE__ */ React44__namespace.createElement("div", { ref, className: utils.cn("grid w-fit gap-1.5", className) }, label ? /* @__PURE__ */ React44__namespace.createElement("label", { className: "text-sm font-medium text-foreground", htmlFor: triggerId, suppressHydrationWarning: true }, label, required ? /* @__PURE__ */ React44__namespace.createElement("span", { "aria-hidden": "true" }, " *") : null) : null, /* @__PURE__ */ React44__namespace.createElement(
+      /* @__PURE__ */ React44__namespace.createElement("div", { ...nativeDivProps, ref, className: utils.cn("grid w-fit gap-1.5", className) }, label ? /* @__PURE__ */ React44__namespace.createElement("label", { className: "text-sm font-medium text-foreground", htmlFor: triggerId, suppressHydrationWarning: true }, label, required ? /* @__PURE__ */ React44__namespace.createElement("span", { "aria-hidden": "true" }, " *") : null) : null, /* @__PURE__ */ React44__namespace.createElement(
         Trigger19,
         {
           id: triggerId,
@@ -6829,7 +6944,7 @@ var Trigger20 = Primitives.FileUpload.Trigger;
 var Clear = Primitives.FileUpload.Clear;
 var List6 = React44__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React44__namespace.createElement(Primitives.FileUpload.List, { ref, className: utils.cn("mt-2 space-y-1", className), ...props }));
 List6.displayName = "FileUpload.List";
-var Item13 = ({ file }) => /* @__PURE__ */ React44__namespace.createElement(Primitives.FileUpload.Item, { file }, /* @__PURE__ */ React44__namespace.createElement("div", { className: "flex items-center justify-between gap-2 rounded-md border border-border bg-bg px-3 py-2 text-sm" }, /* @__PURE__ */ React44__namespace.createElement("span", { className: "truncate" }, file.name), /* @__PURE__ */ React44__namespace.createElement("span", { className: "text-muted-foreground" }, Math.round(file.size / 1024), " KB")));
+var Item13 = React44__namespace.forwardRef(({ file, children, ...props }, ref) => /* @__PURE__ */ React44__namespace.createElement(Primitives.FileUpload.Item, { file, ref, ...props }, children ?? /* @__PURE__ */ React44__namespace.createElement("div", { className: "flex items-center justify-between gap-2 rounded-md border border-border bg-bg px-3 py-2 text-sm" }, /* @__PURE__ */ React44__namespace.createElement("span", { className: "truncate" }, file.name), /* @__PURE__ */ React44__namespace.createElement("span", { className: "text-muted-foreground" }, Math.round(file.size / 1024), " KB"))));
 Item13.displayName = "FileUpload.Item";
 var colorClassMap = {
   primary: "text-primary",
@@ -7258,7 +7373,7 @@ var Input9 = React44__namespace.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 Input9.displayName = "TagsInput.Input";
-var Tag = ({ index, tag }) => /* @__PURE__ */ React44__namespace.createElement(Primitives.TagsInput.Tag, { index }, /* @__PURE__ */ React44__namespace.createElement("span", { className: "inline-flex items-center gap-1 rounded-md bg-secondary px-2 py-1 text-xs" }, tag, /* @__PURE__ */ React44__namespace.createElement(
+var Tag = ({ index, tag, ...rest }) => /* @__PURE__ */ React44__namespace.createElement(Primitives.TagsInput.Tag, { index, ...rest }, /* @__PURE__ */ React44__namespace.createElement("span", { className: "inline-flex items-center gap-1 rounded-md bg-secondary px-2 py-1 text-xs" }, tag, /* @__PURE__ */ React44__namespace.createElement(
   "button",
   {
     type: "button",
@@ -7295,11 +7410,12 @@ var Textarea2 = React44__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 Textarea2.displayName = "Mentions.Textarea";
-var Suggestions = React44__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React44__namespace.createElement(Primitives.Mentions.Suggestions, { disablePortal: true, ...props }, /* @__PURE__ */ React44__namespace.createElement(
+var Suggestions = React44__namespace.forwardRef(({ items, container, className, children, ...rest }, ref) => /* @__PURE__ */ React44__namespace.createElement(Primitives.Mentions.Suggestions, { items, container, disablePortal: true }, /* @__PURE__ */ React44__namespace.createElement(
   "div",
   {
     ref,
-    className: utils.cn("absolute left-0 top-full z-50 mt-1 min-w-[8rem]", className)
+    className: utils.cn("absolute left-0 top-full z-50 mt-1 min-w-[8rem]", className),
+    ...rest
   },
   children
 )));
@@ -7848,7 +7964,7 @@ var trendVariants = tailwindVariants.tv({
     }
   }
 });
-var TrendBadge = ({ value, direction = "neutral", className }) => /* @__PURE__ */ React44__namespace.createElement("span", { className: utils.cn(trendVariants({ direction }), className) }, direction === "up" && /* @__PURE__ */ React44__namespace.createElement("span", { "aria-hidden": true }, "\u2191"), direction === "down" && /* @__PURE__ */ React44__namespace.createElement("span", { "aria-hidden": true }, "\u2193"), direction === "neutral" && /* @__PURE__ */ React44__namespace.createElement("span", { "aria-hidden": true }, "\u2192"), value);
+var TrendBadge = ({ value, direction = "neutral", className, ...props }) => /* @__PURE__ */ React44__namespace.createElement("span", { className: utils.cn(trendVariants({ direction }), className), ...props }, direction === "up" && /* @__PURE__ */ React44__namespace.createElement("span", { "aria-hidden": true }, "\u2191"), direction === "down" && /* @__PURE__ */ React44__namespace.createElement("span", { "aria-hidden": true }, "\u2193"), direction === "neutral" && /* @__PURE__ */ React44__namespace.createElement("span", { "aria-hidden": true }, "\u2192"), value);
 var highlightClasses = {
   primary: "border-primary/30 bg-primary/5",
   secondary: "border-secondary/30 bg-secondary/5",
@@ -8156,7 +8272,9 @@ var Popconfirm = ({
   disabled = false,
   side = "top",
   align = "center",
-  loading = false
+  loading = false,
+  className,
+  ...rest
 }) => {
   const titleId = React44__namespace.useId();
   const [internalOpen, setInternalOpen] = React44__namespace.useState(false);
@@ -8178,6 +8296,7 @@ var Popconfirm = ({
   return /* @__PURE__ */ React44__namespace.createElement(Primitives.Popover.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React44__namespace.createElement(Primitives.Popover.Trigger, { asChild: true }, children), /* @__PURE__ */ React44__namespace.createElement(Primitives.Popover.Portal, null, /* @__PURE__ */ React44__namespace.createElement(
     Primitives.Popover.Content,
     {
+      ...rest,
       side,
       align,
       sideOffset: 8,
@@ -8186,7 +8305,8 @@ var Popconfirm = ({
         "animate-in fade-in-0 zoom-in-95 duration-100",
         "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
         "data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1",
-        "data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1"
+        "data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
+        className
       ),
       "aria-labelledby": titleId,
       onOpenAutoFocus: (e) => e.preventDefault()