@pactor-app/ui 1.10.0 → 1.11.0

package/dist/index.cjs

@@ -877,6 +877,7 @@ var import_react2 = require("react");
 
 // src/ui/breadcrumb.tsx
 var import_lucide_react3 = require("lucide-react");
+var React2 = __toESM(require("react"), 1);
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function Breadcrumb({ ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...props });
@@ -904,12 +905,27 @@ function BreadcrumbItem({ className, ...props }) {
     }
   );
 }
-function BreadcrumbLink({ className, ...props }) {
+function BreadcrumbLink({
+  className,
+  render,
+  ...props
+}) {
+  const linkClassName = cn("transition-colors hover:text-foreground", className);
+  if (render) {
+    return React2.cloneElement(render, {
+      "data-slot": "breadcrumb-link",
+      ...props,
+      className: cn(
+        linkClassName,
+        render.props.className
+      )
+    });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "a",
     {
       "data-slot": "breadcrumb-link",
-      className: cn("transition-colors hover:text-foreground", className),
+      className: linkClassName,
       ...props
     }
   );
@@ -945,14 +961,37 @@ function BreadcrumbSeparator({
   );
 }
 
+// src/components/spa-link.ts
+var import_runtime3 = require("@pactor-app/runtime");
+function shouldInterceptLinkClick(event, href, target) {
+  return typeof href === "string" && href.startsWith("/") && (target === void 0 || target === "_self") && event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
+}
+function useSpaLinkClick() {
+  const { context } = (0, import_runtime3.useRenderer)();
+  return (event, href, target) => {
+    if (shouldInterceptLinkClick(event, href, target)) {
+      event.preventDefault();
+      context.route.navigate(href);
+    }
+  };
+}
+
 // src/components/components/Breadcrumb/index.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function Breadcrumb2({ items = [], className, style }) {
+  const handleSpaClick = useSpaLinkClick();
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Breadcrumb, { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BreadcrumbList, { children: items.map((item, index) => {
     const isLast = index === items.length - 1;
     return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react2.Fragment, { children: [
       index > 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BreadcrumbSeparator, {}) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BreadcrumbItem, { children: isLast || !item.href ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BreadcrumbPage, { children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BreadcrumbLink, { href: item.href, children: item.label }) })
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BreadcrumbItem, { children: isLast || !item.href ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BreadcrumbPage, { children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        BreadcrumbLink,
+        {
+          href: item.href,
+          onClick: (event) => handleSpaClick(event, item.href),
+          children: item.label
+        }
+      ) })
     ] }, `${item.label}-${index}`);
   }) }) });
 }
@@ -974,6 +1013,7 @@ var sizeMap = {
 };
 function Button2({
   text,
+  icon,
   variant = "default",
   danger,
   size = "middle",
@@ -1002,7 +1042,7 @@ function Button2({
         className
       ),
       children: [
-        loading ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react4.Loader2, { "aria-hidden": true, className: "animate-spin" }) : null,
+        loading ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react4.Loader2, { "aria-hidden": true, className: "animate-spin" }) : icon ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { name: icon, size: "sm" }) : null,
         text ?? children
       ]
     }
@@ -1275,17 +1315,17 @@ function Card2({ title, bordered = true, rounded, className, style, children })
 }
 
 // src/components/components/Carousel/index.tsx
-var import_runtime3 = require("@pactor-app/runtime");
+var import_runtime4 = require("@pactor-app/runtime");
 var import_react5 = require("react");
 
 // src/ui/carousel.tsx
 var import_embla_carousel_react = __toESM(require("embla-carousel-react"), 1);
 var import_lucide_react6 = require("lucide-react");
-var React2 = __toESM(require("react"), 1);
+var React3 = __toESM(require("react"), 1);
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var CarouselContext = React2.createContext(null);
+var CarouselContext = React3.createContext(null);
 function useCarousel() {
-  const context = React2.useContext(CarouselContext);
+  const context = React3.useContext(CarouselContext);
   if (!context) {
     throw new Error("useCarousel must be used within a <Carousel />");
   }
@@ -1304,16 +1344,16 @@ function Carousel({
     { ...opts, axis: orientation === "horizontal" ? "x" : "y" },
     plugins
   );
-  const [canScrollPrev, setCanScrollPrev] = React2.useState(false);
-  const [canScrollNext, setCanScrollNext] = React2.useState(false);
-  const onSelect = React2.useCallback((carouselApi) => {
+  const [canScrollPrev, setCanScrollPrev] = React3.useState(false);
+  const [canScrollNext, setCanScrollNext] = React3.useState(false);
+  const onSelect = React3.useCallback((carouselApi) => {
     if (!carouselApi) return;
     setCanScrollPrev(carouselApi.canScrollPrev());
     setCanScrollNext(carouselApi.canScrollNext());
   }, []);
-  const scrollPrev = React2.useCallback(() => api?.scrollPrev(), [api]);
-  const scrollNext = React2.useCallback(() => api?.scrollNext(), [api]);
-  const handleKeyDown = React2.useCallback(
+  const scrollPrev = React3.useCallback(() => api?.scrollPrev(), [api]);
+  const scrollNext = React3.useCallback(() => api?.scrollNext(), [api]);
+  const handleKeyDown = React3.useCallback(
     (event) => {
       if (event.key === "ArrowLeft") {
         event.preventDefault();
@@ -1325,10 +1365,10 @@ function Carousel({
     },
     [scrollPrev, scrollNext]
   );
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (api && setApi) setApi(api);
   }, [api, setApi]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (!api) return;
     onSelect(api);
     api.on("reInit", onSelect);
@@ -1465,7 +1505,7 @@ function Carousel2({
   className,
   style
 }) {
-  const { renderChildren } = (0, import_runtime3.useRenderer)();
+  const { renderChildren } = (0, import_runtime4.useRenderer)();
   const [api, setApi] = (0, import_react5.useState)();
   (0, import_react5.useEffect)(() => {
     if (!api || !autoplay) return;
@@ -1981,7 +2021,7 @@ function Combobox2({
 }
 
 // src/components/components/Command/index.tsx
-var import_runtime4 = require("@pactor-app/runtime");
+var import_runtime5 = require("@pactor-app/runtime");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 function Command2({
   groups = [],
@@ -1991,7 +2031,7 @@ function Command2({
   className,
   style
 }) {
-  const { t } = (0, import_runtime4.useI18n)();
+  const { t } = (0, import_runtime5.useI18n)();
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Command, { className, style, children: [
     /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CommandInput, { placeholder }),
     /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(CommandList, { children: [
@@ -2141,7 +2181,7 @@ function Chart({
 }
 
 // src/components/components/ChatInput/index.tsx
-var import_runtime5 = require("@pactor-app/runtime");
+var import_runtime6 = require("@pactor-app/runtime");
 var import_lucide_react11 = require("lucide-react");
 var import_react9 = require("react");
 
@@ -2181,7 +2221,7 @@ function ChatInput({
   className,
   style
 }) {
-  const { renderChildren } = (0, import_runtime5.useRenderer)();
+  const { renderChildren } = (0, import_runtime6.useRenderer)();
   const controlled = value !== void 0;
   const [draft, setDraft] = (0, import_react9.useState)("");
   const text = controlled ? value : draft;
@@ -2349,7 +2389,7 @@ function ContextMenu2({
 }
 
 // src/components/components/DataTable/index.tsx
-var import_runtime6 = require("@pactor-app/runtime");
+var import_runtime7 = require("@pactor-app/runtime");
 var import_lucide_react12 = require("lucide-react");
 var import_react10 = require("react");
 
@@ -2477,8 +2517,8 @@ function DataTable({
   className,
   style
 }) {
-  const { renderChildren } = (0, import_runtime6.useRenderer)();
-  const { t } = (0, import_runtime6.useI18n)();
+  const { renderChildren } = (0, import_runtime7.useRenderer)();
+  const { t } = (0, import_runtime7.useI18n)();
   const [sortState, setSortState] = (0, import_react10.useState)(sort);
   const [filters, setFilters] = (0, import_react10.useState)({});
   const [current, setCurrent] = (0, import_react10.useState)(1);
@@ -2597,7 +2637,7 @@ function DataTable({
 }
 
 // src/components/components/DatePicker/index.tsx
-var import_runtime7 = require("@pactor-app/runtime");
+var import_runtime8 = require("@pactor-app/runtime");
 var import_date_fns2 = require("date-fns");
 var import_locale = require("date-fns/locale");
 var import_lucide_react13 = require("lucide-react");
@@ -2643,7 +2683,7 @@ function DatePicker(props) {
   const value = props.value;
   const onChange = props.onChange;
   const form = useFormContext();
-  const { locale, t } = (0, import_runtime7.useI18n)();
+  const { locale, t } = (0, import_runtime8.useI18n)();
   const dfLocale = toDateFnsLocale(locale);
   const controlId = (0, import_react11.useId)();
   const inForm = form?.inForm === true && typeof name === "string" && name !== "";
@@ -2886,7 +2926,7 @@ function DatePicker(props) {
 }
 
 // src/components/components/Dialog/index.tsx
-var import_runtime8 = require("@pactor-app/runtime");
+var import_runtime9 = require("@pactor-app/runtime");
 var import_react12 = require("react");
 
 // src/ui/dialog.tsx
@@ -3032,7 +3072,7 @@ function Dialog2({
   className,
   style
 }) {
-  const { renderChildren } = (0, import_runtime8.useRenderer)();
+  const { renderChildren } = (0, import_runtime9.useRenderer)();
   const [innerOpen, setInnerOpen] = (0, import_react12.useState)(false);
   const controlled = open !== void 0;
   const visible = controlled ? open : innerOpen;
@@ -3436,9 +3476,15 @@ function FieldError({ className, ...props }) {
 
 // src/components/components/Field/index.tsx
 var import_jsx_runtime56 = require("react/jsx-runtime");
-function Field2({ label, description, error, children, className, style }) {
+function Field2({ label, required, description, error, children, className, style }) {
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Field, { className, style, children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(FieldLabel, { children: label }) : null,
+    label ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(FieldLabel, { children: [
+      required ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("span", { "aria-hidden": true, className: "text-destructive", children: [
+        "*",
+        " "
+      ] }) : null,
+      label
+    ] }) : null,
     children,
     description ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(FieldDescription, { children: description }) : null,
     error ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(FieldError, { match: true, children: error }) : null
@@ -3513,7 +3559,7 @@ function Footer({ className, style, children }) {
 }
 
 // src/components/components/Form/index.tsx
-var import_runtime9 = require("@pactor-app/runtime");
+var import_runtime10 = require("@pactor-app/runtime");
 var import_react13 = require("react");
 var import_jsx_runtime59 = require("react/jsx-runtime");
 function isEmpty(value) {
@@ -3529,7 +3575,7 @@ function Form({
   onSubmit,
   onValuesChange
 }) {
-  const { context } = (0, import_runtime9.useRenderer)();
+  const { context } = (0, import_runtime10.useRenderer)();
   const [values, setValues] = (0, import_react13.useState)(() => ({
     ...initialValues
   }));
@@ -3630,7 +3676,7 @@ function Grid({ columns = 1, gap, className, style, children }) {
 }
 
 // src/components/components/Header/index.tsx
-var import_runtime10 = require("@pactor-app/runtime");
+var import_runtime11 = require("@pactor-app/runtime");
 var import_lucide_react16 = require("lucide-react");
 var import_jsx_runtime61 = require("react/jsx-runtime");
 var menuItemClass = "flex items-center gap-1 rounded-md px-3 py-2 text-sm transition-colors text-muted-foreground hover:bg-accent/50 hover:text-foreground";
@@ -3813,7 +3859,7 @@ function HeaderLocalesArea({
   locales,
   onSelect
 }) {
-  const { locale } = (0, import_runtime10.useI18n)();
+  const { locale } = (0, import_runtime11.useI18n)();
   const current = locales.find((option) => option.value === locale);
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(DropdownMenu, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
@@ -3839,7 +3885,7 @@ function HeaderLocalesArea({
 }
 
 // src/components/components/HoverCard/index.tsx
-var import_runtime11 = require("@pactor-app/runtime");
+var import_runtime12 = require("@pactor-app/runtime");
 
 // src/ui/hover-card.tsx
 var import_preview_card = require("@base-ui/react/preview-card");
@@ -3889,7 +3935,7 @@ function isDslNode2(value) {
   return typeof value === "object" && value !== null && typeof value.type === "string";
 }
 function HoverCard2({ content, children, className, style }) {
-  const { renderChildren } = (0, import_runtime11.useRenderer)();
+  const { renderChildren } = (0, import_runtime12.useRenderer)();
   return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(HoverCard, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(HoverCardTrigger, { render: triggerWrapper("hover-card-trigger-wrap"), children }),
     /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(HoverCardContent, { className, style, children: isDslNode2(content) ? renderChildren([content]) : content })
@@ -3897,7 +3943,7 @@ function HoverCard2({ content, children, className, style }) {
 }
 
 // src/components/components/Input/index.tsx
-var import_runtime12 = require("@pactor-app/runtime");
+var import_runtime13 = require("@pactor-app/runtime");
 var import_react15 = require("react");
 var import_jsx_runtime64 = require("react/jsx-runtime");
 function Input2({
@@ -3911,10 +3957,11 @@ function Input2({
   allowClear,
   onChange,
   className,
+  controlClassName,
   style
 }) {
   const form = useFormContext();
-  const { t } = (0, import_runtime12.useI18n)();
+  const { t } = (0, import_runtime13.useI18n)();
   const controlId = (0, import_react15.useId)();
   const inForm = form?.inForm === true && typeof name === "string" && name !== "";
   (0, import_react15.useEffect)(() => {
@@ -3942,7 +3989,10 @@ function Input2({
       value: currentValue,
       placeholder,
       disabled,
-      className: !inFormRoot && allowClear !== true ? className : void 0,
+      className: cn(
+        !inFormRoot && allowClear !== true && className,
+        allowClear !== true && controlClassName
+      ),
       style: !inFormRoot && allowClear !== true ? style : void 0,
       onChange: (event) => {
         if (inForm && form && name) {
@@ -3965,7 +4015,11 @@ function Input2({
   const control = allowClear === true ? /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
     "span",
     {
-      className: cn("flex items-center gap-1", !inFormRoot && className),
+      className: cn(
+        "flex items-center gap-1",
+        !inFormRoot && className,
+        controlClassName
+      ),
       style: inFormRoot ? void 0 : style,
       children: [
         input,
@@ -4032,7 +4086,7 @@ var import_react16 = require("react");
 // src/ui/input-otp.tsx
 var import_input_otp = require("input-otp");
 var import_lucide_react17 = require("lucide-react");
-var React3 = __toESM(require("react"), 1);
+var React4 = __toESM(require("react"), 1);
 var import_jsx_runtime67 = require("react/jsx-runtime");
 function InputOTP({
   className,
@@ -4067,7 +4121,7 @@ function InputOTPSlot({
   className,
   ...props
 }) {
-  const inputOTPContext = React3.useContext(import_input_otp.OTPInputContext);
+  const inputOTPContext = React4.useContext(import_input_otp.OTPInputContext);
   const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
   return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
     "div",
@@ -4156,7 +4210,7 @@ function InputOTP2({
 }
 
 // src/components/components/Item/index.tsx
-var import_runtime13 = require("@pactor-app/runtime");
+var import_runtime14 = require("@pactor-app/runtime");
 
 // src/ui/item.tsx
 var import_jsx_runtime69 = require("react/jsx-runtime");
@@ -4237,7 +4291,7 @@ function Item2({
   className,
   style
 }) {
-  const { renderChildren } = (0, import_runtime13.useRenderer)();
+  const { renderChildren } = (0, import_runtime14.useRenderer)();
   const mediaNodes = media === void 0 ? [] : Array.isArray(media) ? media : [media];
   return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(Item, { className, style, children: [
     mediaNodes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ItemMedia, { children: renderChildren(mediaNodes) }) : null,
@@ -4298,10 +4352,10 @@ function Label2({ text, htmlFor, className, style }) {
 
 // src/components/components/Layout/index.tsx
 var import_core = require("@pactor-app/core");
-var import_runtime14 = require("@pactor-app/runtime");
+var import_runtime15 = require("@pactor-app/runtime");
 var import_jsx_runtime75 = require("react/jsx-runtime");
 function Layout({ direction, className, style, dslChildren }) {
-  const { renderChildren, context } = (0, import_runtime14.useRenderer)();
+  const { renderChildren, context } = (0, import_runtime15.useRenderer)();
   const hasSider = Array.isArray(dslChildren) ? dslChildren.some(
     (child) => !(0, import_core.isDslSourceRef)(child) && resolveRootType(child, context) === "Sider"
   ) : false;
@@ -4332,6 +4386,7 @@ function resolveRootType(node, context) {
 // src/components/components/Link/index.tsx
 var import_jsx_runtime76 = require("react/jsx-runtime");
 function Link2({ href, text, target, className, style, children }) {
+  const handleSpaClick = useSpaLinkClick();
   return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
     "a",
     {
@@ -4341,6 +4396,7 @@ function Link2({ href, text, target, className, style, children }) {
       rel: target === "_blank" ? "noreferrer" : void 0,
       className: cn("text-primary underline-offset-4 hover:underline", className),
       style,
+      onClick: (event) => handleSpaClick(event, href, target),
       children: text ?? children
     }
   );
@@ -4422,11 +4478,11 @@ function RailTooltip({
 }
 
 // src/components/components/Sidebar/index.tsx
-var import_runtime15 = require("@pactor-app/runtime");
+var import_runtime16 = require("@pactor-app/runtime");
 var import_react18 = require("react");
 
 // src/ui/sidebar.tsx
-var React4 = __toESM(require("react"), 1);
+var React5 = __toESM(require("react"), 1);
 var import_class_variance_authority5 = require("class-variance-authority");
 var import_lucide_react19 = require("lucide-react");
 
@@ -4618,9 +4674,9 @@ var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React4.createContext(null);
+var SidebarContext = React5.createContext(null);
 function useSidebar() {
-  const context = React4.useContext(SidebarContext);
+  const context = React5.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
@@ -4636,10 +4692,10 @@ function SidebarProvider({
   ...props
 }) {
   const isMobile = useIsMobile();
-  const [openMobile, setOpenMobile] = React4.useState(false);
-  const [_open, _setOpen] = React4.useState(defaultOpen);
+  const [openMobile, setOpenMobile] = React5.useState(false);
+  const [_open, _setOpen] = React5.useState(defaultOpen);
   const open = openProp ?? _open;
-  const setOpen = React4.useCallback(
+  const setOpen = React5.useCallback(
     (value) => {
       const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) {
@@ -4651,10 +4707,10 @@ function SidebarProvider({
     },
     [setOpenProp, open]
   );
-  const toggleSidebar = React4.useCallback(() => {
+  const toggleSidebar = React5.useCallback(() => {
     return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
   }, [isMobile, setOpen, setOpenMobile]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
@@ -4665,7 +4721,7 @@ function SidebarProvider({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
   const state = open ? "expanded" : "collapsed";
-  const contextValue = React4.useMemo(
+  const contextValue = React5.useMemo(
     () => ({
       state,
       open,
@@ -4839,10 +4895,10 @@ function SidebarContent({ className, ...props }) {
   );
 }
 function renderAsChild(children, dataSlot, className, rest) {
-  if (!React4.isValidElement(children)) {
+  if (!React5.isValidElement(children)) {
     return null;
   }
-  return React4.cloneElement(children, {
+  return React5.cloneElement(children, {
     "data-slot": dataSlot,
     className: cn(
       className,
@@ -4959,7 +5015,7 @@ function useSidebarDrawer() {
 }
 function useOptionalRenderer() {
   try {
-    return (0, import_runtime15.useRenderer)();
+    return (0, import_runtime16.useRenderer)();
   } catch {
     return null;
   }
@@ -5066,7 +5122,7 @@ function SidebarInner({
   drawer = true,
   children
 }) {
-  const { t } = (0, import_runtime15.useI18n)();
+  const { t } = (0, import_runtime16.useI18n)();
   const isMobile = useIsMobile();
   const { state, setOpenMobile, toggleSidebar } = useSidebar();
   const collapsed = state === "collapsed";
@@ -5844,13 +5900,13 @@ function Pagination2({
 }
 
 // src/components/components/Popover/index.tsx
-var import_runtime16 = require("@pactor-app/runtime");
+var import_runtime17 = require("@pactor-app/runtime");
 var import_jsx_runtime92 = require("react/jsx-runtime");
 function isDslNode3(value) {
   return typeof value === "object" && value !== null && typeof value.type === "string";
 }
 function Popover2({ content, children, className, style }) {
-  const { renderChildren } = (0, import_runtime16.useRenderer)();
+  const { renderChildren } = (0, import_runtime17.useRenderer)();
   return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(Popover, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
       PopoverTrigger,
@@ -6071,7 +6127,7 @@ function RadioGroup2({
 }
 
 // src/components/components/Resizable/index.tsx
-var import_runtime17 = require("@pactor-app/runtime");
+var import_runtime18 = require("@pactor-app/runtime");
 var import_react22 = require("react");
 
 // src/ui/resizable.tsx
@@ -6124,7 +6180,7 @@ function Resizable({
   className,
   style
 }) {
-  const { renderChildren } = (0, import_runtime17.useRenderer)();
+  const { renderChildren } = (0, import_runtime18.useRenderer)();
   return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(PanelGroup, { orientation: direction, className, style, children: panels.map((panel, index) => /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(import_react22.Fragment, { children: [
     index > 0 ? /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(ResizableHandle, { withHandle: true }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
@@ -6216,7 +6272,7 @@ function ScrollArea2({
 }
 
 // src/components/components/Select/index.tsx
-var import_runtime18 = require("@pactor-app/runtime");
+var import_runtime19 = require("@pactor-app/runtime");
 var import_react23 = require("react");
 
 // src/ui/select.tsx
@@ -6362,10 +6418,11 @@ function Select2({
   allowClear,
   onChange,
   className,
+  controlClassName,
   style
 }) {
   const form = useFormContext();
-  const { t } = (0, import_runtime18.useI18n)();
+  const { t } = (0, import_runtime19.useI18n)();
   const controlId = (0, import_react23.useId)();
   const inForm = form?.inForm === true && typeof name === "string" && name !== "";
   (0, import_react23.useEffect)(() => {
@@ -6387,7 +6444,11 @@ function Select2({
   const select = /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(
     "span",
     {
-      className: cn("inline-flex items-center gap-1", !inFormRoot && className),
+      className: cn(
+        "inline-flex items-center gap-1",
+        !inFormRoot && className,
+        controlClassName
+      ),
       style: inFormRoot ? void 0 : style,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(
@@ -6690,7 +6751,7 @@ function Slider2({
 }
 
 // src/components/components/Sonner/index.tsx
-var import_runtime19 = require("@pactor-app/runtime");
+var import_runtime20 = require("@pactor-app/runtime");
 var import_react25 = require("react");
 
 // src/ui/toast.tsx
@@ -6770,7 +6831,7 @@ function Toaster({ className }) {
 // src/components/components/Sonner/index.tsx
 var import_jsx_runtime111 = require("react/jsx-runtime");
 function Sonner({ className, style }) {
-  const { context } = (0, import_runtime19.useRenderer)();
+  const { context } = (0, import_runtime20.useRenderer)();
   (0, import_react25.useEffect)(() => {
     const { actions } = context;
     if (actions.has("toast")) {
@@ -6923,7 +6984,7 @@ function Switch2({
 }
 
 // src/components/components/Table/index.tsx
-var import_runtime20 = require("@pactor-app/runtime");
+var import_runtime21 = require("@pactor-app/runtime");
 var import_react27 = require("react");
 var import_jsx_runtime117 = require("react/jsx-runtime");
 function renderCellValue2(value) {
@@ -6945,8 +7006,8 @@ function Table3({
   className,
   style
 }) {
-  const { renderChildren } = (0, import_runtime20.useRenderer)();
-  const { t } = (0, import_runtime20.useI18n)();
+  const { renderChildren } = (0, import_runtime21.useRenderer)();
+  const { t } = (0, import_runtime21.useI18n)();
   const [current, setCurrent] = (0, import_react27.useState)(1);
   const pageSize = pagination === false ? void 0 : pagination?.pageSize;
   const total = dataSource.length;
@@ -7012,7 +7073,7 @@ function Table3({
 }
 
 // src/components/components/Tabs/index.tsx
-var import_runtime21 = require("@pactor-app/runtime");
+var import_runtime22 = require("@pactor-app/runtime");
 
 // src/ui/tabs.tsx
 var import_tabs = require("@base-ui/react/tabs");
@@ -7098,7 +7159,7 @@ function TabsContent({
 // src/components/components/Tabs/index.tsx
 var import_jsx_runtime119 = require("react/jsx-runtime");
 function Tabs2({ items = [], activeKey, variant, onChange, className, style }) {
-  const { renderChildren } = (0, import_runtime21.useRenderer)();
+  const { renderChildren } = (0, import_runtime22.useRenderer)();
   return /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(
     Tabs,
     {
@@ -7291,9 +7352,9 @@ function Toggle2({
 // src/ui/toggle-group.tsx
 var import_toggle3 = require("@base-ui/react/toggle");
 var import_toggle_group = require("@base-ui/react/toggle-group");
-var React5 = __toESM(require("react"), 1);
+var React6 = __toESM(require("react"), 1);
 var import_jsx_runtime124 = require("react/jsx-runtime");
-var ToggleGroupContext = React5.createContext({
+var ToggleGroupContext = React6.createContext({
   size: "default",
   variant: "default"
 });
@@ -7326,7 +7387,7 @@ function ToggleGroupItem({
   size,
   ...props
 }) {
-  const context = React5.useContext(ToggleGroupContext);
+  const context = React6.useContext(ToggleGroupContext);
   return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
     import_toggle3.Toggle,
     {
@@ -7599,7 +7660,7 @@ function collectDefaultOpenKeys(registry, activeMenuId) {
 // src/layout/admin/AdminLayout.tsx
 var import_permission = require("@pactor-app/permission");
 var import_router = require("@pactor-app/router");
-var import_runtime22 = require("@pactor-app/runtime");
+var import_runtime23 = require("@pactor-app/runtime");
 var import_react30 = require("react");
 
 // src/layout/admin/use-media-query.ts
@@ -7846,7 +7907,7 @@ function AdminLayout({
   headerExtra,
   children
 }) {
-  const { t } = (0, import_runtime22.useI18n)();
+  const { t } = (0, import_runtime23.useI18n)();
   const mode = config.mode ?? "top-side";
   const showHeader = config.header ?? true;
   const showSidebar = (config.sidebar ?? true) && mode !== "top-bottom";
@@ -8489,7 +8550,7 @@ var OverlayManager = class {
 };
 
 // src/interaction/actions.ts
-var import_runtime23 = require("@pactor-app/runtime");
+var import_runtime24 = require("@pactor-app/runtime");
 function createUiBridge() {
   return {};
 }
@@ -8505,7 +8566,7 @@ function registerInteractionActions(actions, manager, ui) {
       return failure("[pactor-interaction] overlay.open \u7F3A\u5C11 overlay \u914D\u7F6E\u53C2\u6570");
     }
     const { content, ...rest } = overlay;
-    const resolved = (0, import_runtime23.resolveDeep)(rest, ctx.scope);
+    const resolved = (0, import_runtime24.resolveDeep)(rest, ctx.scope);
     const config = { ...resolved, content };
     const data = await manager.open(config, {
       parentScope: { ...ctx.scope }
@@ -8568,7 +8629,7 @@ function isRecord(value) {
 }
 
 // src/interaction/provider.tsx
-var import_runtime24 = require("@pactor-app/runtime");
+var import_runtime25 = require("@pactor-app/runtime");
 var import_react32 = require("react");
 var import_react_dom = require("react-dom");
 var import_jsx_runtime134 = require("react/jsx-runtime");
@@ -8586,7 +8647,7 @@ function InteractionProvider({
   const [confirmState, setConfirmState] = (0, import_react32.useState)(null);
   const [confirmOpen, setConfirmOpen] = (0, import_react32.useState)(false);
   const [toasts, setToasts] = (0, import_react32.useState)([]);
-  const { t } = (0, import_runtime24.useI18n)();
+  const { t } = (0, import_runtime25.useI18n)();
   const { modal, message } = (0, import_react32.useMemo)(() => {
     const pushToast = (type, content) => {
       const id = Date.now() + Math.random();
@@ -8691,7 +8752,7 @@ function InteractionProvider({
 
 // src/interaction/host.tsx
 var import_lucide_react27 = require("lucide-react");
-var import_runtime25 = require("@pactor-app/runtime");
+var import_runtime26 = require("@pactor-app/runtime");
 var import_react33 = require("react");
 var import_jsx_runtime135 = require("react/jsx-runtime");
 function toCssWidth(width) {
@@ -8701,7 +8762,7 @@ function toCssWidth(width) {
   return typeof width === "number" ? `${width}px` : width;
 }
 function OverlayHost({ manager, resolvePage }) {
-  const renderer = (0, import_runtime25.useRenderer)();
+  const renderer = (0, import_runtime26.useRenderer)();
   const stack = (0, import_react33.useSyncExternalStore)(
     (onChange) => manager.subscribe(onChange),
     () => manager.stack()
@@ -8734,7 +8795,7 @@ function OverlayEntryView({
   renderer,
   resolvePage
 }) {
-  const { t } = (0, import_runtime25.useI18n)();
+  const { t } = (0, import_runtime26.useI18n)();
   const handleCancel = () => manager.close(entry.id);
   let body = null;
   if (entry.content) {
@@ -8802,7 +8863,7 @@ function ShadcnDrawerView({
   onCancel,
   children
 }) {
-  const { t } = (0, import_runtime25.useI18n)();
+  const { t } = (0, import_runtime26.useI18n)();
   const panelStyle = entry.width === void 0 ? void 0 : { width: toCssWidth(entry.width) };
   return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
     Drawer,
@@ -8873,7 +8934,7 @@ function PageOverlayBody({
           return;
         }
         const host = renderer.context;
-        created = (0, import_runtime25.createPageRuntime)(pageDsl, {
+        created = (0, import_runtime26.createPageRuntime)(pageDsl, {
           app: host.app,
           user: host.user,
           components: host.components,
@@ -8902,7 +8963,7 @@ function PageOverlayBody({
   if (!child) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_runtime25.PageRuntimeView, { runtime: child });
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_runtime26.PageRuntimeView, { runtime: child });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {