@sero-ai/ui 0.4.0 → 0.4.2

package/dist/components/ui/chart.js

@@ -1,11 +1,13 @@
+"use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as RechartsPrimitive from "recharts";
 import { cn } from "../../lib/utils";
 const THEMES = { light: "", dark: ".dark" };
+const INITIAL_DIMENSION = { width: 320, height: 200 };
 const ChartContext = React.createContext(null);
 function useChart() {
-  const context = React.use(ChartContext);
+  const context = React.useContext(ChartContext);
   if (!context) {
     throw new Error("useChart must be used within a <ChartContainer />");
   }
@@ -16,30 +18,37 @@ function ChartContainer({
   className,
   children,
   config,
+  initialDimension = INITIAL_DIMENSION,
   ...props
 }) {
   const uniqueId = React.useId();
-  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+  const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
   return /* @__PURE__ */ jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs(
     "div",
     {
       "data-slot": "chart",
       "data-chart": chartId,
       className: cn(
-        "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+        "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
         className
       ),
       ...props,
       children: [
         /* @__PURE__ */ jsx(ChartStyle, { id: chartId, config }),
-        /* @__PURE__ */ jsx(RechartsPrimitive.ResponsiveContainer, { children })
+        /* @__PURE__ */ jsx(
+          RechartsPrimitive.ResponsiveContainer,
+          {
+            initialDimension,
+            children
+          }
+        )
       ]
     }
   ) });
 }
 const ChartStyle = ({ id, config }) => {
   const colorConfig = Object.entries(config).filter(
-    ([, config2]) => config2.theme || config2.color
+    ([, config2]) => config2.theme ?? config2.color
   );
   if (!colorConfig.length) {
     return null;
@@ -52,7 +61,7 @@ const ChartStyle = ({ id, config }) => {
           ([theme, prefix]) => `
 ${prefix} [data-chart=${id}] {
 ${colorConfig.map(([key, itemConfig]) => {
-            const color = itemConfig.theme?.[theme] || itemConfig.color;
+            const color = itemConfig.theme?.[theme] ?? itemConfig.color;
             return color ? `  --color-${key}: ${color};` : null;
           }).join("\n")}
 }
@@ -84,9 +93,9 @@ function ChartTooltipContent({
       return null;
     }
     const [item] = payload;
-    const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
+    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`;
     const itemConfig = getPayloadConfigFromPayload(config, item, key);
-    const value = !labelKey && typeof label === "string" ? config[label]?.label || label : itemConfig?.label;
+    const value = !labelKey && typeof label === "string" ? config[label]?.label ?? label : itemConfig?.label;
     if (labelFormatter) {
       return /* @__PURE__ */ jsx("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) });
     }
@@ -111,20 +120,20 @@ function ChartTooltipContent({
     "div",
     {
       className: cn(
-        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        "grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
         className
       ),
       children: [
         !nestLabel ? tooltipLabel : null,
         /* @__PURE__ */ jsx("div", { className: "grid gap-1.5", children: payload.filter((item) => item.type !== "none").map((item, index) => {
-          const key = `${nameKey || item.name || item.dataKey || "value"}`;
+          const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;
           const itemConfig = getPayloadConfigFromPayload(config, item, key);
-          const indicatorColor = color || item.payload.fill || item.color;
+          const indicatorColor = color ?? item.payload?.fill ?? item.color;
           return /* @__PURE__ */ jsx(
             "div",
             {
               className: cn(
-                "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
                 indicator === "dot" && "items-center"
               ),
               children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -134,7 +143,7 @@ function ChartTooltipContent({
                     className: cn(
                       "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
                       {
-                        "size-2.5": indicator === "dot",
+                        "h-2.5 w-2.5": indicator === "dot",
                         "w-1": indicator === "line",
                         "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
                         "my-0.5": nestLabel && indicator === "dashed"
@@ -156,15 +165,15 @@ function ChartTooltipContent({
                     children: [
                       /* @__PURE__ */ jsxs("div", { className: "grid gap-1.5", children: [
                         nestLabel ? tooltipLabel : null,
-                        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: itemConfig?.label || item.name })
+                        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: itemConfig?.label ?? item.name })
                       ] }),
-                      item.value && /* @__PURE__ */ jsx("span", { className: "text-foreground font-mono font-medium tabular-nums", children: item.value.toLocaleString() })
+                      item.value != null && /* @__PURE__ */ jsx("span", { className: "font-mono font-medium text-foreground tabular-nums", children: typeof item.value === "number" ? item.value.toLocaleString() : String(item.value) })
                     ]
                   }
                 )
               ] })
             },
-            item.dataKey
+            index
           );
         }) })
       ]
@@ -191,20 +200,20 @@ function ChartLegendContent({
         verticalAlign === "top" ? "pb-3" : "pt-3",
         className
       ),
-      children: payload.filter((item) => item.type !== "none").map((item) => {
-        const key = `${nameKey || item.dataKey || "value"}`;
+      children: payload.filter((item) => item.type !== "none").map((item, index) => {
+        const key = `${nameKey ?? item.dataKey ?? "value"}`;
         const itemConfig = getPayloadConfigFromPayload(config, item, key);
         return /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
-              "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
+              "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
             ),
             children: [
               itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: "size-2 shrink-0 rounded-[2px]",
+                  className: "h-2 w-2 shrink-0 rounded-[2px]",
                   style: {
                     backgroundColor: item.color
                   }
@@ -213,7 +222,7 @@ function ChartLegendContent({
               itemConfig?.label
             ]
           },
-          item.value
+          index
         );
       })
     }

package/dist/components/ui/combobox.cjs

@@ -4,6 +4,7 @@ var _react = require('react'); var React = _interopRequireWildcard(_react);
 var _react2 = require('@base-ui/react');
 var _lucidereact = require('lucide-react');
 var _utils = require('../../lib/utils');
+var _pluginstylescopecontext = require('../../plugin-style-scope-context');
 var _button = require('./button');
 
 
@@ -94,7 +95,8 @@ function ComboboxContent({
   anchor,
   ...props
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react2.Combobox.Portal, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  const container = _pluginstylescopecontext.usePluginPortalContainer.call(void 0, );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react2.Combobox.Portal, { container, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _react2.Combobox.Positioner,
     {
       side,
@@ -141,7 +143,7 @@ function ComboboxItem({
     {
       "data-slot": "combobox-item",
       className: _utils.cn.call(void 0, 
-        "data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-base outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props,
@@ -178,7 +180,7 @@ function ComboboxLabel({
     {
       "data-slot": "combobox-label",
       className: _utils.cn.call(void 0, 
-        "text-muted-foreground px-2 py-1.5 text-xs pointer-coarse:px-3 pointer-coarse:py-2 pointer-coarse:text-sm",
+        "text-muted-foreground px-2 py-1.5 text-xs pointer-coarse:px-3 pointer-coarse:py-2 pointer-coarse:text-base",
         className
       ),
       ...props
@@ -194,7 +196,7 @@ function ComboboxEmpty({ className, ...props }) {
     {
       "data-slot": "combobox-empty",
       className: _utils.cn.call(void 0, 
-        "text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex",
+        "text-muted-foreground hidden w-full justify-center py-2 text-center text-base group-data-empty/combobox-content:flex",
         className
       ),
       ...props
@@ -223,7 +225,7 @@ function ComboboxChips({
     {
       "data-slot": "combobox-chips",
       className: _utils.cn.call(void 0, 
-        "dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5",
+        "dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-base shadow-xs transition-[color,box-shadow] focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5",
         className
       ),
       ...props

package/dist/components/ui/combobox.js

@@ -4,6 +4,7 @@ import * as React from "react";
 import { Combobox as ComboboxPrimitive } from "@base-ui/react";
 import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
 import { cn } from "../../lib/utils";
+import { usePluginPortalContainer } from "../../plugin-style-scope-context";
 import { Button } from "./button";
 import {
   InputGroup,
@@ -94,7 +95,8 @@ function ComboboxContent({
   anchor,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(ComboboxPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  const container = usePluginPortalContainer();
+  return /* @__PURE__ */ jsx(ComboboxPrimitive.Portal, { container, children: /* @__PURE__ */ jsx(
     ComboboxPrimitive.Positioner,
     {
       side,
@@ -141,7 +143,7 @@ function ComboboxItem({
     {
       "data-slot": "combobox-item",
       className: cn(
-        "data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-base outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props,
@@ -178,7 +180,7 @@ function ComboboxLabel({
     {
       "data-slot": "combobox-label",
       className: cn(
-        "text-muted-foreground px-2 py-1.5 text-xs pointer-coarse:px-3 pointer-coarse:py-2 pointer-coarse:text-sm",
+        "text-muted-foreground px-2 py-1.5 text-xs pointer-coarse:px-3 pointer-coarse:py-2 pointer-coarse:text-base",
         className
       ),
       ...props
@@ -194,7 +196,7 @@ function ComboboxEmpty({ className, ...props }) {
     {
       "data-slot": "combobox-empty",
       className: cn(
-        "text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex",
+        "text-muted-foreground hidden w-full justify-center py-2 text-center text-base group-data-empty/combobox-content:flex",
         className
       ),
       ...props
@@ -223,7 +225,7 @@ function ComboboxChips({
     {
       "data-slot": "combobox-chips",
       className: cn(
-        "dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5",
+        "dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-base shadow-xs transition-[color,box-shadow] focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5",
         className
       ),
       ...props

package/dist/components/ui/command.cjs

@@ -65,7 +65,7 @@ function CommandInput({
           {
             "data-slot": "command-input",
             className: _utils.cn.call(void 0, 
-              "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent pl-1.5 py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+              "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent pl-1.5 py-3 text-base outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
               className
             ),
             ...props
@@ -98,7 +98,7 @@ function CommandEmpty({
     _cmdk.Command.Empty,
     {
       "data-slot": "command-empty",
-      className: "py-6 text-center text-sm",
+      className: "py-6 text-center text-base",
       ...props
     }
   );
@@ -141,7 +141,7 @@ function CommandItem({
     {
       "data-slot": "command-item",
       className: _utils.cn.call(void 0, 
-        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-base outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props

package/dist/components/ui/command.js

@@ -65,7 +65,7 @@ function CommandInput({
           {
             "data-slot": "command-input",
             className: cn(
-              "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent pl-1.5 py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+              "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent pl-1.5 py-3 text-base outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
               className
             ),
             ...props
@@ -98,7 +98,7 @@ function CommandEmpty({
     CommandPrimitive.Empty,
     {
       "data-slot": "command-empty",
-      className: "py-6 text-center text-sm",
+      className: "py-6 text-center text-base",
       ...props
     }
   );
@@ -141,7 +141,7 @@ function CommandItem({
     {
       "data-slot": "command-item",
       className: cn(
-        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-base outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props

package/dist/components/ui/context-menu.cjs

@@ -3,6 +3,7 @@ var _jsxruntime = require('react/jsx-runtime');
 var _lucidereact = require('lucide-react');
 var _radixui = require('radix-ui');
 var _utils = require('../../lib/utils');
+var _pluginstylescopecontext = require('../../plugin-style-scope-context');
 function ContextMenu({
   ...props
 }) {
@@ -21,7 +22,8 @@ function ContextMenuGroup({
 function ContextMenuPortal({
   ...props
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _radixui.ContextMenu.Portal, { "data-slot": "context-menu-portal", ...props });
+  const container = _pluginstylescopecontext.usePluginPortalContainer.call(void 0, );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _radixui.ContextMenu.Portal, { "data-slot": "context-menu-portal", container, ...props });
 }
 function ContextMenuSub({
   ...props
@@ -51,7 +53,7 @@ function ContextMenuSubTrigger({
       "data-slot": "context-menu-sub-trigger",
       "data-inset": inset,
       className: _utils.cn.call(void 0, 
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-base outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props,
@@ -82,7 +84,8 @@ function ContextMenuContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _radixui.ContextMenu.Portal, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  const container = _pluginstylescopecontext.usePluginPortalContainer.call(void 0, );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _radixui.ContextMenu.Portal, { container, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _radixui.ContextMenu.Content,
     {
       "data-slot": "context-menu-content",
@@ -107,7 +110,7 @@ function ContextMenuItem({
       "data-inset": inset,
       "data-variant": variant,
       className: _utils.cn.call(void 0, 
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-3 py-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-3 py-2 text-base outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props
@@ -125,7 +128,7 @@ function ContextMenuCheckboxItem({
     {
       "data-slot": "context-menu-checkbox-item",
       className: _utils.cn.call(void 0, 
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-base outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       checked,
@@ -147,7 +150,7 @@ function ContextMenuRadioItem({
     {
       "data-slot": "context-menu-radio-item",
       className: _utils.cn.call(void 0, 
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-base outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props,
@@ -169,7 +172,7 @@ function ContextMenuLabel({
       "data-slot": "context-menu-label",
       "data-inset": inset,
       className: _utils.cn.call(void 0, 
-        "text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        "text-foreground px-2 py-1.5 text-base font-medium data-[inset]:pl-8",
         className
       ),
       ...props

package/dist/components/ui/context-menu.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 import { ContextMenu as ContextMenuPrimitive } from "radix-ui";
 import { cn } from "../../lib/utils";
+import { usePluginPortalContainer } from "../../plugin-style-scope-context";
 function ContextMenu({
   ...props
 }) {
@@ -21,7 +22,8 @@ function ContextMenuGroup({
 function ContextMenuPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { "data-slot": "context-menu-portal", ...props });
+  const container = usePluginPortalContainer();
+  return /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { "data-slot": "context-menu-portal", container, ...props });
 }
 function ContextMenuSub({
   ...props
@@ -51,7 +53,7 @@ function ContextMenuSubTrigger({
       "data-slot": "context-menu-sub-trigger",
       "data-inset": inset,
       className: cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-base outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props,
@@ -82,7 +84,8 @@ function ContextMenuContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  const container = usePluginPortalContainer();
+  return /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { container, children: /* @__PURE__ */ jsx(
     ContextMenuPrimitive.Content,
     {
       "data-slot": "context-menu-content",
@@ -107,7 +110,7 @@ function ContextMenuItem({
       "data-inset": inset,
       "data-variant": variant,
       className: cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-3 py-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-3 py-2 text-base outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props
@@ -125,7 +128,7 @@ function ContextMenuCheckboxItem({
     {
       "data-slot": "context-menu-checkbox-item",
       className: cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-base outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       checked,
@@ -147,7 +150,7 @@ function ContextMenuRadioItem({
     {
       "data-slot": "context-menu-radio-item",
       className: cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-base outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props,
@@ -169,7 +172,7 @@ function ContextMenuLabel({
       "data-slot": "context-menu-label",
       "data-inset": inset,
       className: cn(
-        "text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        "text-foreground px-2 py-1.5 text-base font-medium data-[inset]:pl-8",
         className
       ),
       ...props

package/dist/components/ui/dialog.cjs

@@ -3,6 +3,7 @@ var _jsxruntime = require('react/jsx-runtime');
 var _lucidereact = require('lucide-react');
 var _radixui = require('radix-ui');
 var _utils = require('../../lib/utils');
+var _pluginstylescopecontext = require('../../plugin-style-scope-context');
 var _button = require('./button');
 function Dialog({
   ...props
@@ -17,7 +18,8 @@ function DialogTrigger({
 function DialogPortal({
   ...props
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _radixui.Dialog.Portal, { "data-slot": "dialog-portal", ...props });
+  const container = _pluginstylescopecontext.usePluginPortalContainer.call(void 0, );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _radixui.Dialog.Portal, { "data-slot": "dialog-portal", container, ...props });
 }
 function DialogClose({
   ...props
@@ -128,7 +130,7 @@ function DialogDescription({
     _radixui.Dialog.Description,
     {
       "data-slot": "dialog-description",
-      className: _utils.cn.call(void 0, "text-muted-foreground text-sm", className),
+      className: _utils.cn.call(void 0, "text-muted-foreground text-base", className),
       ...props
     }
   );

package/dist/components/ui/dialog.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { XIcon } from "lucide-react";
 import { Dialog as DialogPrimitive } from "radix-ui";
 import { cn } from "../../lib/utils";
+import { usePluginPortalContainer } from "../../plugin-style-scope-context";
 import { Button } from "./button";
 function Dialog({
   ...props
@@ -17,7 +18,8 @@ function DialogTrigger({
 function DialogPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+  const container = usePluginPortalContainer();
+  return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", container, ...props });
 }
 function DialogClose({
   ...props
@@ -128,7 +130,7 @@ function DialogDescription({
     DialogPrimitive.Description,
     {
       "data-slot": "dialog-description",
-      className: cn("text-muted-foreground text-sm", className),
+      className: cn("text-muted-foreground text-base", className),
       ...props
     }
   );

package/dist/components/ui/drawer.cjs

@@ -1,6 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
 var _vaul = require('vaul');
 var _utils = require('../../lib/utils');
+var _pluginstylescopecontext = require('../../plugin-style-scope-context');
 function Drawer({
   ...props
 }) {
@@ -14,7 +15,8 @@ function DrawerTrigger({
 function DrawerPortal({
   ...props
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _vaul.Drawer.Portal, { "data-slot": "drawer-portal", ...props });
+  const container = _pluginstylescopecontext.usePluginPortalContainer.call(void 0, );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _vaul.Drawer.Portal, { "data-slot": "drawer-portal", container, ...props });
 }
 function DrawerClose({
   ...props
@@ -109,7 +111,7 @@ function DrawerDescription({
     _vaul.Drawer.Description,
     {
       "data-slot": "drawer-description",
-      className: _utils.cn.call(void 0, "text-muted-foreground text-sm", className),
+      className: _utils.cn.call(void 0, "text-muted-foreground text-base", className),
       ...props
     }
   );

package/dist/components/ui/drawer.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Drawer as DrawerPrimitive } from "vaul";
 import { cn } from "../../lib/utils";
+import { usePluginPortalContainer } from "../../plugin-style-scope-context";
 function Drawer({
   ...props
 }) {
@@ -14,7 +15,8 @@ function DrawerTrigger({
 function DrawerPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx(DrawerPrimitive.Portal, { "data-slot": "drawer-portal", ...props });
+  const container = usePluginPortalContainer();
+  return /* @__PURE__ */ jsx(DrawerPrimitive.Portal, { "data-slot": "drawer-portal", container, ...props });
 }
 function DrawerClose({
   ...props
@@ -109,7 +111,7 @@ function DrawerDescription({
     DrawerPrimitive.Description,
     {
       "data-slot": "drawer-description",
-      className: cn("text-muted-foreground text-sm", className),
+      className: cn("text-muted-foreground text-base", className),
       ...props
     }
   );