@pactor-app/ui 1.10.0 → 1.11.0

package/dist/components/index.cjs

@@ -861,6 +861,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 });
@@ -888,12 +889,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
     }
   );
@@ -929,14 +945,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}`);
   }) }) });
 }
@@ -958,6 +997,7 @@ var sizeMap = {
 };
 function Button2({
   text,
+  icon,
   variant = "default",
   danger,
   size = "middle",
@@ -986,7 +1026,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
       ]
     }
@@ -1259,17 +1299,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 />");
   }
@@ -1288,16 +1328,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();
@@ -1309,10 +1349,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);
@@ -1449,7 +1489,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;
@@ -1965,7 +2005,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 = [],
@@ -1975,7 +2015,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: [
@@ -2125,7 +2165,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");
 
@@ -2165,7 +2205,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;
@@ -2333,7 +2373,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");
 
@@ -2461,8 +2501,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);
@@ -2581,7 +2621,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");
@@ -2627,7 +2667,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 !== "";
@@ -2870,7 +2910,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
@@ -2998,7 +3038,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;
@@ -3397,9 +3437,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
@@ -3474,7 +3520,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) {
@@ -3490,7 +3536,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
   }));
@@ -3591,7 +3637,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";
@@ -3774,7 +3820,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)(
@@ -3800,7 +3846,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");
@@ -3850,7 +3896,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 })
@@ -3858,7 +3904,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({
@@ -3872,10 +3918,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)(() => {
@@ -3903,7 +3950,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) {
@@ -3926,7 +3976,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,
@@ -3993,7 +4047,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,
@@ -4028,7 +4082,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",
@@ -4117,7 +4171,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");
@@ -4198,7 +4252,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,
@@ -4259,10 +4313,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;
@@ -4293,6 +4347,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",
     {
@@ -4302,6 +4357,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
     }
   );
@@ -4383,11 +4439,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");
 
@@ -4579,9 +4635,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.");
   }
@@ -4597,10 +4653,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) {
@@ -4612,10 +4668,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();
@@ -4626,7 +4682,7 @@ function SidebarProvider({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
   const state = open ? "expanded" : "collapsed";
-  const contextValue = React4.useMemo(
+  const contextValue = React5.useMemo(
     () => ({
       state,
       open,
@@ -4800,10 +4856,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,
@@ -4920,7 +4976,7 @@ function useSidebarDrawer() {
 }
 function useOptionalRenderer() {
   try {
-    return (0, import_runtime15.useRenderer)();
+    return (0, import_runtime16.useRenderer)();
   } catch {
     return null;
   }
@@ -5027,7 +5083,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";
@@ -5805,13 +5861,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,
@@ -6032,7 +6088,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
@@ -6085,7 +6141,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)(
@@ -6177,7 +6233,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
@@ -6323,10 +6379,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)(() => {
@@ -6348,7 +6405,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)(
@@ -6651,7 +6712,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
@@ -6731,7 +6792,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")) {
@@ -6884,7 +6945,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) {
@@ -6906,8 +6967,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;
@@ -6973,7 +7034,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");
@@ -7059,7 +7120,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,
     {
@@ -7252,9 +7313,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"
 });
@@ -7287,7 +7348,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,
     {