shadcn-ui-react 0.5.0 → 0.5.2

package/dist/index.js

@@ -3638,6 +3638,148 @@ function getYearOptions(navStart, navEnd, formatters2, dateLib, reverse = false)
   });
 }
 
+// node_modules/react-day-picker/dist/esm/noonDateLib.js
+function createNoonOverrides(timeZone, options = {}) {
+  var _a, _b;
+  const { weekStartsOn, locale } = options;
+  const fallbackWeekStartsOn = (_b = weekStartsOn != null ? weekStartsOn : (_a = locale == null ? void 0 : locale.options) == null ? void 0 : _a.weekStartsOn) != null ? _b : 0;
+  const toNoonTZDate = (date) => {
+    const normalizedDate = typeof date === "number" || typeof date === "string" ? new Date(date) : date;
+    return new TZDate(normalizedDate.getFullYear(), normalizedDate.getMonth(), normalizedDate.getDate(), 12, 0, 0, timeZone);
+  };
+  const toCalendarDate = (date) => {
+    const zoned = toNoonTZDate(date);
+    return new Date(zoned.getFullYear(), zoned.getMonth(), zoned.getDate(), 0, 0, 0, 0);
+  };
+  return {
+    today: () => {
+      return toNoonTZDate(TZDate.tz(timeZone));
+    },
+    newDate: (year, monthIndex, date) => {
+      return new TZDate(year, monthIndex, date, 12, 0, 0, timeZone);
+    },
+    startOfDay: (date) => {
+      return toNoonTZDate(date);
+    },
+    startOfWeek: (date, options2) => {
+      var _a2;
+      const base = toNoonTZDate(date);
+      const weekStartsOnValue = (_a2 = options2 == null ? void 0 : options2.weekStartsOn) != null ? _a2 : fallbackWeekStartsOn;
+      const diff = (base.getDay() - weekStartsOnValue + 7) % 7;
+      base.setDate(base.getDate() - diff);
+      return base;
+    },
+    startOfISOWeek: (date) => {
+      const base = toNoonTZDate(date);
+      const diff = (base.getDay() - 1 + 7) % 7;
+      base.setDate(base.getDate() - diff);
+      return base;
+    },
+    startOfMonth: (date) => {
+      const base = toNoonTZDate(date);
+      base.setDate(1);
+      return base;
+    },
+    startOfYear: (date) => {
+      const base = toNoonTZDate(date);
+      base.setMonth(0, 1);
+      return base;
+    },
+    endOfWeek: (date, options2) => {
+      var _a2;
+      const base = toNoonTZDate(date);
+      const weekStartsOnValue = (_a2 = options2 == null ? void 0 : options2.weekStartsOn) != null ? _a2 : fallbackWeekStartsOn;
+      const endDow = (weekStartsOnValue + 6) % 7;
+      const diff = (endDow - base.getDay() + 7) % 7;
+      base.setDate(base.getDate() + diff);
+      return base;
+    },
+    endOfISOWeek: (date) => {
+      const base = toNoonTZDate(date);
+      const diff = (7 - base.getDay()) % 7;
+      base.setDate(base.getDate() + diff);
+      return base;
+    },
+    endOfMonth: (date) => {
+      const base = toNoonTZDate(date);
+      base.setMonth(base.getMonth() + 1, 0);
+      return base;
+    },
+    endOfYear: (date) => {
+      const base = toNoonTZDate(date);
+      base.setMonth(11, 31);
+      return base;
+    },
+    eachMonthOfInterval: (interval) => {
+      const start = toNoonTZDate(interval.start);
+      const end = toNoonTZDate(interval.end);
+      const result = [];
+      const cursor = new TZDate(start.getFullYear(), start.getMonth(), 1, 12, 0, 0, timeZone);
+      const endKey = end.getFullYear() * 12 + end.getMonth();
+      while (cursor.getFullYear() * 12 + cursor.getMonth() <= endKey) {
+        result.push(new TZDate(cursor, timeZone));
+        cursor.setMonth(cursor.getMonth() + 1, 1);
+      }
+      return result;
+    },
+    // Normalize to noon once before arithmetic (avoid DST/midnight edge cases),
+    // mutate the same TZDate, and return it.
+    addDays: (date, amount) => {
+      const base = toNoonTZDate(date);
+      base.setDate(base.getDate() + amount);
+      return base;
+    },
+    addWeeks: (date, amount) => {
+      const base = toNoonTZDate(date);
+      base.setDate(base.getDate() + amount * 7);
+      return base;
+    },
+    addMonths: (date, amount) => {
+      const base = toNoonTZDate(date);
+      base.setMonth(base.getMonth() + amount);
+      return base;
+    },
+    addYears: (date, amount) => {
+      const base = toNoonTZDate(date);
+      base.setFullYear(base.getFullYear() + amount);
+      return base;
+    },
+    eachYearOfInterval: (interval) => {
+      const start = toNoonTZDate(interval.start);
+      const end = toNoonTZDate(interval.end);
+      const years = [];
+      const cursor = new TZDate(start.getFullYear(), 0, 1, 12, 0, 0, timeZone);
+      while (cursor.getFullYear() <= end.getFullYear()) {
+        years.push(new TZDate(cursor, timeZone));
+        cursor.setFullYear(cursor.getFullYear() + 1, 0, 1);
+      }
+      return years;
+    },
+    getWeek: (date, options2) => {
+      var _a2, _b2, _c, _d;
+      const base = toCalendarDate(date);
+      return getWeek(base, {
+        weekStartsOn: (_a2 = options2 == null ? void 0 : options2.weekStartsOn) != null ? _a2 : fallbackWeekStartsOn,
+        firstWeekContainsDate: (_d = (_c = options2 == null ? void 0 : options2.firstWeekContainsDate) != null ? _c : (_b2 = locale == null ? void 0 : locale.options) == null ? void 0 : _b2.firstWeekContainsDate) != null ? _d : 1
+      });
+    },
+    getISOWeek: (date) => {
+      const base = toCalendarDate(date);
+      return getISOWeek(base);
+    },
+    differenceInCalendarDays: (dateLeft, dateRight) => {
+      const left = toCalendarDate(dateLeft);
+      const right = toCalendarDate(dateRight);
+      return differenceInCalendarDays(left, right);
+    },
+    differenceInCalendarMonths: (dateLeft, dateRight) => {
+      const left = toCalendarDate(dateLeft);
+      const right = toCalendarDate(dateRight);
+      return differenceInCalendarMonths(left, right);
+    }
+  };
+}
+
 // node_modules/react-day-picker/dist/esm/useAnimation.js
 import { useLayoutEffect, useRef } from "react";
 var asHtmlElement = (element) => {
@@ -4431,15 +4573,22 @@ function toTimeZone(date, timeZone) {
 }
 
 // node_modules/react-day-picker/dist/esm/utils/convertMatchersToTimeZone.js
-function convertMatcher(matcher, timeZone) {
+function toZoneNoon(date, timeZone, noonSafe) {
+  if (!noonSafe)
+    return toTimeZone(date, timeZone);
+  const zoned = toTimeZone(date, timeZone);
+  const noonZoned = new TZDate(zoned.getFullYear(), zoned.getMonth(), zoned.getDate(), 12, 0, 0, timeZone);
+  return new Date(noonZoned.getTime());
+}
+function convertMatcher(matcher, timeZone, noonSafe) {
   if (typeof matcher === "boolean" || typeof matcher === "function") {
     return matcher;
   }
   if (matcher instanceof Date) {
-    return toTimeZone(matcher, timeZone);
+    return toZoneNoon(matcher, timeZone, noonSafe);
   }
   if (Array.isArray(matcher)) {
-    return matcher.map((value) => value instanceof Date ? toTimeZone(value, timeZone) : value);
+    return matcher.map((value) => value instanceof Date ? toZoneNoon(value, timeZone, noonSafe) : value);
   }
   if (isDateRange(matcher)) {
     return __spreadProps(__spreadValues({}, matcher), {
@@ -4449,30 +4598,30 @@ function convertMatcher(matcher, timeZone) {
   }
   if (isDateInterval(matcher)) {
     return {
-      before: toTimeZone(matcher.before, timeZone),
-      after: toTimeZone(matcher.after, timeZone)
+      before: toZoneNoon(matcher.before, timeZone, noonSafe),
+      after: toZoneNoon(matcher.after, timeZone, noonSafe)
     };
   }
   if (isDateAfterType(matcher)) {
     return {
-      after: toTimeZone(matcher.after, timeZone)
+      after: toZoneNoon(matcher.after, timeZone, noonSafe)
     };
   }
   if (isDateBeforeType(matcher)) {
     return {
-      before: toTimeZone(matcher.before, timeZone)
+      before: toZoneNoon(matcher.before, timeZone, noonSafe)
     };
   }
   return matcher;
 }
-function convertMatchersToTimeZone(matchers, timeZone) {
+function convertMatchersToTimeZone(matchers, timeZone, noonSafe) {
   if (!matchers) {
     return matchers;
   }
   if (Array.isArray(matchers)) {
-    return matchers.map((matcher) => convertMatcher(matcher, timeZone));
+    return matchers.map((matcher) => convertMatcher(matcher, timeZone, noonSafe));
   }
-  return convertMatcher(matchers, timeZone);
+  return convertMatcher(matchers, timeZone, noonSafe);
 }
 
 // node_modules/react-day-picker/dist/esm/DayPicker.js
@@ -4525,16 +4674,23 @@ function DayPicker(initialProps) {
     }
   }
   const { components, formatters: formatters2, labels, dateLib, locale, classNames } = useMemo2(() => {
+    var _a2;
     const locale2 = __spreadValues(__spreadValues({}, enUS2), props.locale);
+    const weekStartsOn = props.broadcastCalendar ? 1 : props.weekStartsOn;
+    const noonOverrides = props.noonSafe && props.timeZone ? createNoonOverrides(props.timeZone, {
+      weekStartsOn,
+      locale: locale2
+    }) : void 0;
+    const overrides = props.dateLib && noonOverrides ? __spreadValues(__spreadValues({}, noonOverrides), props.dateLib) : (_a2 = props.dateLib) != null ? _a2 : noonOverrides;
     const dateLib2 = new DateLib({
       locale: locale2,
-      weekStartsOn: props.broadcastCalendar ? 1 : props.weekStartsOn,
+      weekStartsOn,
       firstWeekContainsDate: props.firstWeekContainsDate,
       useAdditionalWeekYearTokens: props.useAdditionalWeekYearTokens,
       useAdditionalDayOfYearTokens: props.useAdditionalDayOfYearTokens,
       timeZone: props.timeZone,
       numerals: props.numerals
-    }, props.dateLib);
+    }, overrides);
     return {
       dateLib: dateLib2,
       components: getComponents(props.components),
@@ -4553,6 +4709,7 @@ function DayPicker(initialProps) {
     props.timeZone,
     props.numerals,
     props.dateLib,
+    props.noonSafe,
     props.components,
     props.formatters,
     props.labels,
@@ -5825,7 +5982,7 @@ var Input = React41.forwardRef(
     ]);
     const base = "block w-full bg-transparent text-foreground placeholder:text-muted-foreground outline-none transition disabled:opacity-50 disabled:cursor-not-allowed";
     const sizeCls = size === "sm" ? "h-9 px-3 text-sm" : size === "lg" ? "h-12 px-5 text-base" : "h-11 px-4 text-sm";
-    const variants2 = {
+    const variants4 = {
       outline: "rounded-md border border-input bg-input backdrop-blur-sm shadow-sm hover:border-primary/60 focus:border-primary focus:ring-2 focus:ring-primary/20",
       soft: "rounded-md border border-transparent bg-muted/60 hover:bg-muted shadow-sm focus:bg-input/80 focus:ring-2 focus:ring-primary/20",
       ghost: "rounded-md border border-transparent bg-transparent hover:bg-muted/50 focus:ring-2 focus:ring-ring",
@@ -5868,7 +6025,7 @@ var Input = React41.forwardRef(
           disabled,
           className: classNameDefault ? cn(
             base,
-            variants2[variant],
+            variants4[variant],
             variant === "flushed" ? specialSizeForFlushed : variant === "link" ? specialSizeForLink : sizeCls,
             errorCls,
             iconPadLeft,
@@ -5975,7 +6132,7 @@ var FormField = (_a) => {
                 Asterisk,
                 {
                   className: cn(
-                    "ml-[1px] h-3 w-3 text-red-500",
+                    "ml-px h-3 w-3 text-red-500",
                     requiredLabelClassName
                   )
                 }
@@ -6179,7 +6336,7 @@ var FormSelect = ({
                   Asterisk,
                   {
                     className: cn(
-                      "ml-[4px] h-3 w-3 text-red-500",
+                      "ml-1 h-3 w-3 text-red-500",
                       requiredLabelClassName
                     )
                   }
@@ -7014,12 +7171,9 @@ var ResizablePanelGroup = (_a) => {
     "className"
   ]);
   return /* @__PURE__ */ jsx29(
-    ResizablePrimitive.PanelGroup,
+    ResizablePrimitive.Group,
     __spreadValues({
-      className: cn(
-        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-        className
-      )
+      className: cn("flex h-full w-full aria-[orientation=vertical]:flex-col", className)
     }, props)
   );
 };
@@ -7033,7 +7187,7 @@ var ResizableHandle = (_a) => {
     "className"
   ]);
   return /* @__PURE__ */ jsx29(
-    ResizablePrimitive.PanelResizeHandle,
+    ResizablePrimitive.Separator,
     __spreadProps(__spreadValues({
       className: cn(
         "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
@@ -7192,7 +7346,7 @@ var SelectContent = React54.forwardRef((_a, ref) => {
     __spreadProps(__spreadValues({
       ref,
       className: cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "relative z-50 max-h-96 min-w-32 overflow-hidden  bg-popover border border-border  text-popover-foreground rounded-md shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
       ),
@@ -7205,7 +7359,7 @@ var SelectContent = React54.forwardRef((_a, ref) => {
           {
             className: cn(
               "p-1",
-              position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+              position === "popper" && "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"
             ),
             children
           }
@@ -7234,7 +7388,7 @@ var SelectItem = React54.forwardRef((_a, ref) => {
     __spreadProps(__spreadValues({
       ref,
       className: cn(
-        "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
         className
       )
     }, props), {
@@ -7262,7 +7416,7 @@ SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import * as React55 from "react";
 import { jsx as jsx33 } from "react/jsx-runtime";
-var Separator5 = React55.forwardRef(
+var Separator6 = React55.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, orientation = "horizontal", decorative = true } = _b, props = __objRest(_b, ["className", "orientation", "decorative"]);
     return /* @__PURE__ */ jsx33(
@@ -7280,7 +7434,7 @@ var Separator5 = React55.forwardRef(
     );
   }
 );
-Separator5.displayName = SeparatorPrimitive.Root.displayName;
+Separator6.displayName = SeparatorPrimitive.Root.displayName;
 
 // src/components/sheet.tsx
 import * as SheetPrimitive from "@radix-ui/react-dialog";
@@ -7497,16 +7651,18 @@ Switch.displayName = SwitchPrimitives.Root.displayName;
 // src/components/table.tsx
 import * as React59 from "react";
 import { jsx as jsx39 } from "react/jsx-runtime";
-var Table = React59.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx39("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx39(
-    "table",
-    __spreadValues({
-      ref,
-      className: cn("w-full caption-bottom text-sm", className)
-    }, props)
-  ) });
-});
+var Table = React59.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, containerClassName } = _b, props = __objRest(_b, ["className", "containerClassName"]);
+    return /* @__PURE__ */ jsx39("div", { className: cn("relative w-full overflow-auto", containerClassName), children: /* @__PURE__ */ jsx39(
+      "table",
+      __spreadValues({
+        ref,
+        className: cn("w-full caption-bottom text-sm", className)
+      }, props)
+    ) });
+  }
+);
 Table.displayName = "Table";
 var TableHeader = React59.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
@@ -7559,7 +7715,7 @@ var TableHead = React59.forwardRef((_a, ref) => {
     __spreadValues({
       ref,
       className: cn(
-        "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5",
         className
       )
     }, props)
@@ -7573,7 +7729,7 @@ var TableCell = React59.forwardRef((_a, ref) => {
     __spreadValues({
       ref,
       className: cn(
-        "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        "p-2 align-middle [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5",
         className
       )
     }, props)
@@ -8026,11 +8182,9 @@ function Breadcrumbs({ items, className, classNameList }) {
 }
 
 // src/shared/data-table.tsx
-import React67, { useEffect as useEffect4 } from "react";
-import {
-  DoubleArrowLeftIcon,
-  DoubleArrowRightIcon
-} from "@radix-ui/react-icons";
+import React67, { useEffect as useEffect4, useMemo as useMemo3 } from "react";
+import { AnimatePresence, motion as motion2 } from "framer-motion";
+import { DoubleArrowLeftIcon, DoubleArrowRightIcon } from "@radix-ui/react-icons";
 import {
   flexRender,
   getCoreRowModel,
@@ -8062,16 +8216,36 @@ function DataTable({
   tableClassName,
   onPageChange,
   onClick,
-  onPageSizeChange
+  onPageSizeChange,
+  animate = true,
+  stickyHeader = true,
+  heightClassName = "h-[clamp(22rem,80vh,44rem)] supports-[height:100dvh]:h-[clamp(22rem,80dvh,44rem)]"
 }) {
+  const safePageCount = Math.max(pageCount != null ? pageCount : 1, 1);
   const [pagination, setPagination] = React67.useState({
     pageIndex: Math.max(page - 1, 0),
     pageSize: perPage
   });
+  useEffect4(() => {
+    setPagination((prev) => {
+      const nextIndex = Math.max(page - 1, 0);
+      const nextSize = perPage;
+      if (prev.pageIndex === nextIndex && prev.pageSize === nextSize) return prev;
+      return { pageIndex: nextIndex, pageSize: nextSize };
+    });
+  }, [page, perPage]);
+  useEffect4(() => {
+    setPagination((prev) => {
+      const maxIndex = Math.max(safePageCount - 1, 0);
+      const clamped = Math.min(prev.pageIndex, maxIndex);
+      if (clamped === prev.pageIndex) return prev;
+      return __spreadProps(__spreadValues({}, prev), { pageIndex: clamped });
+    });
+  }, [safePageCount]);
   const table = useReactTable({
     data,
     columns,
-    pageCount,
+    pageCount: safePageCount,
     getCoreRowModel: getCoreRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
     state: { pagination },
@@ -8080,147 +8254,190 @@ function DataTable({
     manualPagination: true,
     manualFiltering: true
   });
-  const onClickItem = (row) => {
-    if (onClick) {
-      onClick(row);
-    }
-  };
+  const clickable = !!onClick;
   useEffect4(() => {
-    if (onPageChange) {
-      onPageChange(pagination.pageIndex + 1);
-    }
-  }, [pagination, onPageChange]);
-  return /* @__PURE__ */ jsxs23("div", { className: cn("rounded-md border bg-background flex flex-col", className), children: [
-    /* @__PURE__ */ jsxs23(ScrollArea, { className: "h-[calc(80vh-220px)] md:h-[calc(80dvh-80px)]", children: [
-      /* @__PURE__ */ jsxs23(Table, { className: cn("relative", tableClassName), children: [
-        /* @__PURE__ */ jsx48(TableHeader, { className: headerClassName, children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx48(TableRow, { className: rowClassName, children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx48(TableHead, { className: headerClassName, children: header.isPlaceholder ? null : flexRender(
-          header.column.columnDef.header,
-          header.getContext()
-        ) }, header.id)) }, headerGroup.id)) }),
-        /* @__PURE__ */ jsx48(TableBody, { className: bodyClassName, children: table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx48(
-          TableRow,
-          {
-            "data-state": row.getIsSelected() ? "selected" : void 0,
-            onClick: () => onClickItem(row.original),
-            className: rowClassName,
-            children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx48(TableCell, { className: cellClassName, children: flexRender(
-              cell.column.columnDef.cell,
-              cell.getContext()
-            ) }, cell.id))
-          },
-          row.id
-        )) : emptyData || /* @__PURE__ */ jsx48(TableRow, { children: /* @__PURE__ */ jsx48(
-          TableCell,
-          {
-            colSpan: columns.length,
-            className: "h-24 text-center",
-            children: "No results."
-          }
-        ) }) })
-      ] }),
-      /* @__PURE__ */ jsx48(ScrollBar, { orientation: "horizontal" })
-    ] }),
-    /* @__PURE__ */ jsxs23("div", { className: "border-t px-4 py-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [
-      /* @__PURE__ */ jsxs23("div", { className: "flex flex-1 flex-wrap items-center gap-2", children: [
-        isRowsSelected && /* @__PURE__ */ jsxs23("div", { className: "text-muted-foreground text-sm", children: [
-          table.getFilteredSelectedRowModel().rows.length,
-          " ",
-          ofLabel,
-          " ",
-          table.getFilteredRowModel().rows.length,
-          " ",
-          rowsSelectedLabel
-        ] }),
-        totalRows ? /* @__PURE__ */ jsxs23("div", { className: "text-sm text-muted-foreground", children: [
-          "Total: ",
-          totalRows,
-          " registros"
-        ] }) : null
-      ] }),
-      /* @__PURE__ */ jsxs23("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-end", children: [
-        /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx48("p", { className: "text-sm font-medium whitespace-nowrap", children: rowPerPageLabel }),
+    onPageChange == null ? void 0 : onPageChange(pagination.pageIndex + 1);
+  }, [pagination.pageIndex, onPageChange]);
+  const pageKey = useMemo3(
+    () => `${pagination.pageIndex}-${pagination.pageSize}-${data.length}`,
+    [pagination.pageIndex, pagination.pageSize, data.length]
+  );
+  return /* @__PURE__ */ jsxs23(
+    "div",
+    {
+      className: cn(
+        "relative w-full overflow-hidden rounded-xl border bg-background/60 backdrop-blur supports-backdrop-filter:bg-background/40 shadow-sm",
+        "flex flex-col",
+        heightClassName,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx48("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxs23(ScrollArea, { className: "h-full", children: [
           /* @__PURE__ */ jsxs23(
-            Select2,
+            Table,
             {
-              value: `${pagination.pageSize}`,
-              onValueChange: (value) => {
-                const newSize = Number(value);
-                setPagination(__spreadProps(__spreadValues({}, pagination), {
-                  pageSize: newSize,
-                  pageIndex: 0
-                }));
-                if (onPageSizeChange) onPageSizeChange(newSize);
-              },
+              containerClassName: "overflow-visible",
+              className: cn("w-full", tableClassName),
               children: [
-                /* @__PURE__ */ jsx48(SelectTrigger, { className: "h-8 w-[70px]", children: /* @__PURE__ */ jsx48(SelectValue, { placeholder: pagination.pageSize }) }),
-                /* @__PURE__ */ jsx48(SelectContent, { side: "top", children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx48(SelectItem, { value: `${size}`, children: size }, size)) })
+                /* @__PURE__ */ jsx48(
+                  TableHeader,
+                  {
+                    className: cn(
+                      headerClassName,
+                      stickyHeader ? "sticky top-0 z-10 bg-background/80 backdrop-blur border-b" : ""
+                    ),
+                    children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx48(TableRow, { className: cn("hover:bg-transparent", rowClassName), children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx48(TableHead, { className: cn("whitespace-nowrap", headerClassName), children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }, headerGroup.id))
+                  }
+                ),
+                animate ? /* @__PURE__ */ jsx48(AnimatePresence, { mode: "wait", initial: false, children: /* @__PURE__ */ jsx48(
+                  motion2.tbody,
+                  {
+                    className: cn("[&_tr:last-child]:border-0", bodyClassName),
+                    initial: { opacity: 0, y: 6 },
+                    animate: { opacity: 1, y: 0 },
+                    exit: { opacity: 0, y: -6 },
+                    transition: { duration: 0.18 },
+                    children: table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx48(
+                      TableRow,
+                      {
+                        "data-state": row.getIsSelected() ? "selected" : void 0,
+                        onClick: () => onClick == null ? void 0 : onClick(row.original),
+                        className: cn(
+                          rowClassName,
+                          clickable ? "cursor-pointer hover:bg-muted/60 active:bg-muted/80" : ""
+                        ),
+                        children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx48(TableCell, { className: cellClassName, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+                      },
+                      row.id
+                    )) : emptyData || /* @__PURE__ */ jsx48(TableRow, { children: /* @__PURE__ */ jsx48(TableCell, { colSpan: columns.length, className: "h-28 text-center text-muted-foreground", children: "No results." }) })
+                  },
+                  pageKey
+                ) }) : /* @__PURE__ */ jsx48(TableBody, { className: bodyClassName, children: table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx48(
+                  TableRow,
+                  {
+                    "data-state": row.getIsSelected() ? "selected" : void 0,
+                    onClick: () => onClick == null ? void 0 : onClick(row.original),
+                    className: cn(
+                      rowClassName,
+                      clickable ? "cursor-pointer hover:bg-muted/60 active:bg-muted/80" : ""
+                    ),
+                    children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx48(TableCell, { className: cn(cellClassName), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+                  },
+                  row.id
+                )) : emptyData || /* @__PURE__ */ jsx48(TableRow, { children: /* @__PURE__ */ jsx48(TableCell, { colSpan: columns.length, className: "h-28 text-center text-muted-foreground", children: "No results." }) }) })
               ]
             }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxs23("div", { className: "flex w-[110px] items-center justify-center text-sm font-medium", children: [
-            pageLabel,
-            " ",
-            pagination.pageIndex + 1,
-            " ",
-            ofLabel,
-            " ",
-            pageCount
-          ] }),
-          /* @__PURE__ */ jsx48(
-            Button,
-            {
-              "aria-label": "Go to first page",
-              variant: "outline",
-              className: "hidden h-8 w-8 p-0 lg:flex",
-              onClick: () => setPagination(__spreadProps(__spreadValues({}, pagination), { pageIndex: 0 })),
-              disabled: pagination.pageIndex === 0,
-              children: /* @__PURE__ */ jsx48(DoubleArrowLeftIcon, { className: "h-4 w-4" })
-            }
-          ),
-          /* @__PURE__ */ jsx48(
-            Button,
-            {
-              "aria-label": "Go to previous page",
-              variant: "outline",
-              className: "h-8 w-8 p-0",
-              onClick: () => setPagination(__spreadProps(__spreadValues({}, pagination), {
-                pageIndex: pagination.pageIndex - 1
-              })),
-              disabled: pagination.pageIndex === 0,
-              children: /* @__PURE__ */ jsx48(ChevronLeftIcon2, { className: "h-4 w-4" })
-            }
-          ),
-          /* @__PURE__ */ jsx48(
-            Button,
-            {
-              "aria-label": "Go to next page",
-              variant: "outline",
-              className: "h-8 w-8 p-0",
-              onClick: () => setPagination(__spreadProps(__spreadValues({}, pagination), {
-                pageIndex: pagination.pageIndex + 1
-              })),
-              disabled: pagination.pageIndex + 1 >= pageCount,
-              children: /* @__PURE__ */ jsx48(ChevronRightIcon6, { className: "h-4 w-4" })
-            }
           ),
-          /* @__PURE__ */ jsx48(
-            Button,
-            {
-              "aria-label": "Go to last page",
-              variant: "outline",
-              className: "hidden h-8 w-8 p-0 lg:flex",
-              onClick: () => setPagination(__spreadProps(__spreadValues({}, pagination), { pageIndex: pageCount - 1 })),
-              disabled: pagination.pageIndex + 1 >= pageCount,
-              children: /* @__PURE__ */ jsx48(DoubleArrowRightIcon, { className: "h-4 w-4" })
-            }
-          )
-        ] })
-      ] })
-    ] })
-  ] });
+          /* @__PURE__ */ jsx48(ScrollBar, { orientation: "horizontal" })
+        ] }) }),
+        /* @__PURE__ */ jsx48("div", { className: "border-t bg-background/70 backdrop-blur supports-backdrop-filter:bg-background/50", children: /* @__PURE__ */ jsx48("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsxs23("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-[1fr_auto] sm:items-center", children: [
+          /* @__PURE__ */ jsxs23("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1", children: [
+            isRowsSelected && /* @__PURE__ */ jsxs23("div", { className: "text-muted-foreground text-sm", children: [
+              table.getFilteredSelectedRowModel().rows.length,
+              " ",
+              ofLabel,
+              " ",
+              table.getFilteredRowModel().rows.length,
+              " ",
+              rowsSelectedLabel
+            ] }),
+            typeof totalRows === "number" && /* @__PURE__ */ jsxs23("div", { className: "text-sm text-muted-foreground", children: [
+              "Total: ",
+              totalRows,
+              " registros"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs23("div", { className: "flex flex-wrap items-center justify-between gap-3 sm:justify-end", children: [
+            /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx48("p", { className: "text-sm font-medium whitespace-nowrap", children: rowPerPageLabel }),
+              /* @__PURE__ */ jsxs23(
+                Select2,
+                {
+                  value: `${pagination.pageSize}`,
+                  onValueChange: (value) => {
+                    const newSize = Number(value);
+                    setPagination((p) => __spreadProps(__spreadValues({}, p), { pageSize: newSize, pageIndex: 0 }));
+                    onPageSizeChange == null ? void 0 : onPageSizeChange(newSize);
+                    onPageChange == null ? void 0 : onPageChange(1);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx48(SelectTrigger, { className: "h-8 w-21", children: /* @__PURE__ */ jsx48(SelectValue, { placeholder: pagination.pageSize }) }),
+                    /* @__PURE__ */ jsx48(SelectContent, { side: "top", children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx48(SelectItem, { value: `${size}`, children: size }, size)) })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxs23("div", { className: "hidden sm:flex min-w-35 items-center justify-center text-sm font-medium", children: [
+                pageLabel,
+                " ",
+                pagination.pageIndex + 1,
+                " ",
+                ofLabel,
+                " ",
+                safePageCount
+              ] }),
+              /* @__PURE__ */ jsx48(
+                Button,
+                {
+                  "aria-label": "Go to first page",
+                  variant: "outline",
+                  className: "hidden h-8 w-8 p-0 lg:flex",
+                  onClick: () => setPagination((p) => __spreadProps(__spreadValues({}, p), { pageIndex: 0 })),
+                  disabled: pagination.pageIndex === 0,
+                  children: /* @__PURE__ */ jsx48(DoubleArrowLeftIcon, { className: "h-4 w-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx48(
+                Button,
+                {
+                  "aria-label": "Go to previous page",
+                  variant: "outline",
+                  className: "h-8 w-8 p-0",
+                  onClick: () => setPagination((p) => __spreadProps(__spreadValues({}, p), { pageIndex: Math.max(p.pageIndex - 1, 0) })),
+                  disabled: pagination.pageIndex === 0,
+                  children: /* @__PURE__ */ jsx48(ChevronLeftIcon2, { className: "h-4 w-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx48(
+                Button,
+                {
+                  "aria-label": "Go to next page",
+                  variant: "outline",
+                  className: "h-8 w-8 p-0",
+                  onClick: () => setPagination((p) => __spreadProps(__spreadValues({}, p), {
+                    pageIndex: Math.min(p.pageIndex + 1, safePageCount - 1)
+                  })),
+                  disabled: pagination.pageIndex + 1 >= safePageCount,
+                  children: /* @__PURE__ */ jsx48(ChevronRightIcon6, { className: "h-4 w-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx48(
+                Button,
+                {
+                  "aria-label": "Go to last page",
+                  variant: "outline",
+                  className: "hidden h-8 w-8 p-0 lg:flex",
+                  onClick: () => setPagination((p) => __spreadProps(__spreadValues({}, p), { pageIndex: safePageCount - 1 })),
+                  disabled: pagination.pageIndex + 1 >= safePageCount,
+                  children: /* @__PURE__ */ jsx48(DoubleArrowRightIcon, { className: "h-4 w-4" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs23("div", { className: "sm:hidden w-full text-center text-xs text-muted-foreground", children: [
+              pageLabel,
+              " ",
+              pagination.pageIndex + 1,
+              " ",
+              ofLabel,
+              " ",
+              safePageCount
+            ] })
+          ] })
+        ] }) }) })
+      ]
+    }
+  );
 }
 
 // src/shared/data-table-skeleton.tsx
@@ -8235,10 +8452,10 @@ function DataTableSkeleton({
   return /* @__PURE__ */ jsxs24("div", { className: "w-full space-y-3 overflow-auto", children: [
     /* @__PURE__ */ jsxs24("div", { className: "flex w-full items-center justify-between space-x-2 overflow-auto p-1", children: [
       /* @__PURE__ */ jsxs24("div", { className: "flex flex-1 items-center space-x-2 space-y-4", children: [
-        searchableColumnCount > 0 ? Array.from({ length: searchableColumnCount }).map((_, i) => /* @__PURE__ */ jsx49(Skeleton, { className: "h-10 w-[150px] lg:w-[250px]" }, i)) : null,
-        filterableColumnCount > 0 ? Array.from({ length: filterableColumnCount }).map((_, i) => /* @__PURE__ */ jsx49(Skeleton, { className: "h-10 w-[70px] border-dashed" }, i)) : null
+        searchableColumnCount > 0 ? Array.from({ length: searchableColumnCount }).map((_, i) => /* @__PURE__ */ jsx49(Skeleton, { className: "h-10 w-37.5 lg:w-62.5" }, i)) : null,
+        filterableColumnCount > 0 ? Array.from({ length: filterableColumnCount }).map((_, i) => /* @__PURE__ */ jsx49(Skeleton, { className: "h-10 w-17.5 border-dashed" }, i)) : null
       ] }),
-      showViewOptions ? /* @__PURE__ */ jsx49(Skeleton, { className: "ml-auto hidden h-7 w-[70px] lg:flex" }) : null
+      showViewOptions ? /* @__PURE__ */ jsx49(Skeleton, { className: "ml-auto hidden h-7 w-17.5 lg:flex" }) : null
     ] }),
     /* @__PURE__ */ jsx49("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxs24(Table, { children: [
       /* @__PURE__ */ jsx49(TableHeader, { children: Array.from({ length: 1 }).map((_, i) => /* @__PURE__ */ jsx49(TableRow, { className: "hover:bg-transparent", children: Array.from({ length: columnCount }).map((_2, i2) => /* @__PURE__ */ jsx49(TableHead, { children: /* @__PURE__ */ jsx49(Skeleton, { className: "h-6 w-full" }) }, i2)) }, i)) }),
@@ -8249,9 +8466,9 @@ function DataTableSkeleton({
       /* @__PURE__ */ jsxs24("div", { className: "flex flex-col items-center gap-4 sm:flex-row sm:gap-6 lg:gap-8", children: [
         /* @__PURE__ */ jsxs24("div", { className: "flex items-center space-x-2", children: [
           /* @__PURE__ */ jsx49(Skeleton, { className: "h-8 w-24" }),
-          /* @__PURE__ */ jsx49(Skeleton, { className: "h-8 w-[70px]" })
+          /* @__PURE__ */ jsx49(Skeleton, { className: "h-8 w-17.5" })
         ] }),
-        /* @__PURE__ */ jsx49("div", { className: "flex w-[100px] items-center justify-center text-sm font-medium", children: /* @__PURE__ */ jsx49(Skeleton, { className: "h-8 w-20" }) }),
+        /* @__PURE__ */ jsx49("div", { className: "flex w-25 items-center justify-center text-sm font-medium", children: /* @__PURE__ */ jsx49(Skeleton, { className: "h-8 w-20" }) }),
         /* @__PURE__ */ jsxs24("div", { className: "flex items-center space-x-2", children: [
           /* @__PURE__ */ jsx49(Skeleton, { className: "hidden size-8 lg:block" }),
           /* @__PURE__ */ jsx49(Skeleton, { className: "size-8" }),
@@ -8477,6 +8694,166 @@ function Dropzone({
     ] }, idx)) })
   ] });
 }
+
+// src/types/select.ts
+var inputVariants2 = {
+  outline: "rounded-md border border-input bg-input backdrop-blur-sm shadow-sm hover:border-primary/60 focus:border-primary focus:ring-2 focus:ring-primary/20",
+  soft: "rounded-md border border-transparent bg-muted/60 hover:bg-muted shadow-sm focus:bg-input/80 focus:ring-2 focus:ring-primary/20",
+  ghost: "rounded-md border border-transparent bg-transparent hover:bg-muted/50 focus:ring-2 focus:ring-ring",
+  filled: "rounded-md border border-input bg-muted/70 hover:bg-muted shadow-inner focus:bg-input/70 focus:ring-2 focus:ring-primary/20",
+  // sin bordes laterales/superior, solo inferior; sin sombras ni radios
+  flushed: "rounded-none border-0 border-b border-input px-0 shadow-none focus:border-b-2 focus:border-primary focus:ring-0",
+  // sin estilos, útil para inputs embebidos o controles muy custom
+  unstyled: "border-0 shadow-none focus:ring-0",
+  // aspecto tipo enlace: inline height-auto, sin paddings ni borde
+  link: "border-0 p-0 h-auto shadow-none bg-transparent text-primary underline-offset-4 focus:underline focus:ring-0"
+};
+var variants2 = inputVariants2;
+
+// src/components/ui/select.tsx
+import { jsx as jsx55, jsxs as jsxs30 } from "react/jsx-runtime";
+function UiSelect({
+  ref,
+  label,
+  placeholder,
+  value,
+  onChange,
+  items,
+  children,
+  className,
+  selectClassName,
+  labelClassName,
+  contentClassName,
+  size = "md",
+  variant = "outline",
+  errorMessage,
+  htmlFormItemId: formItemId
+}) {
+  const triggerBase = "relative inline-flex w-full items-center justify-between outline-none transition disabled:opacity-50 disabled:cursor-not-allowed text-foreground placeholder:text-muted-foreground ring-offset-background";
+  const sizeTrigger = {
+    sm: "h-9 px-3 text-sm",
+    md: "h-11 px-4 text-sm",
+    lg: "h-12 px-5 text-base"
+  };
+  const specialFlushed = variant === "flushed" ? size === "sm" ? "h-9 text-sm" : size === "lg" ? "h-12 text-base" : "h-11 text-sm" : "";
+  const specialLink = variant === "link" ? "text-sm" : "";
+  const contentBase = "bg-popover text-popover-foreground border border-border rounded-md shadow-md";
+  const itemSize = {
+    sm: "h-8 text-sm",
+    md: "h-9 text-sm",
+    lg: "h-10 text-base"
+  };
+  return /* @__PURE__ */ jsxs30("div", { className: cn("w-full", selectClassName), children: [
+    label ? /* @__PURE__ */ jsx55(
+      Label3,
+      {
+        ref,
+        className: cn(errorMessage && "text-destructive", labelClassName),
+        htmlFor: formItemId,
+        children: label
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs30(Select2, { value, onValueChange: onChange, children: [
+      /* @__PURE__ */ jsx55(
+        SelectTrigger,
+        {
+          className: cn(
+            triggerBase,
+            variants2[variant],
+            variant === "flushed" ? specialFlushed : variant === "link" ? specialLink : sizeTrigger[size],
+            errorMessage && "ring-destructive focus:ring-destructive/40 border-destructive",
+            className,
+            label ? "mt-1" : ""
+          ),
+          children: /* @__PURE__ */ jsx55(SelectValue, { placeholder })
+        }
+      ),
+      /* @__PURE__ */ jsx55(SelectContent, { className: cn(contentBase, contentClassName), children: children ? children : items ? items == null ? void 0 : items.map((item) => /* @__PURE__ */ jsx55(
+        SelectItem,
+        {
+          value: item.value,
+          className: cn(itemSize[size]),
+          children: item.label
+        },
+        item.value
+      )) : null })
+    ] }),
+    errorMessage ? /* @__PURE__ */ jsx55("p", { className: "text-sm text-destructive mt-1 ", children: errorMessage }) : null
+  ] });
+}
+
+// src/types/input.ts
+var inputVariants3 = {
+  outline: "rounded-md border border-input bg-input backdrop-blur-sm shadow-sm hover:border-primary/60 focus:border-primary focus:ring-2 focus:ring-primary/20",
+  // default variant
+  soft: "rounded-md border border-transparent bg-muted/60 hover:bg-muted shadow-sm focus:bg-input/80 focus:ring-2 focus:ring-primary/20",
+  // similar to 'filled' but lighter
+  ghost: "rounded-md border border-transparent bg-transparent hover:bg-muted/50 focus:ring-2 focus:ring-ring",
+  // no background, just hover/focus effect
+  filled: "rounded-md border border-input bg-muted/70 hover:bg-muted shadow-inner focus:bg-input/70 focus:ring-2 focus:ring-primary/20",
+  // solid background, inset shadow
+  flushed: "rounded-none border-0 border-b border-input px-0 shadow-none focus:border-b-2 focus:border-primary focus:ring-0",
+  // no lateral/top borders, only bottom; no shadows or rounding
+  unstyled: "border-0 shadow-none focus:ring-0",
+  // no styles, useful for embedded inputs or very custom controls
+  link: "border-0 p-0 h-auto shadow-none bg-transparent text-primary underline-offset-4 focus:underline focus:ring-0"
+};
+var variants3 = inputVariants3;
+
+// src/components/ui/input.tsx
+import { jsx as jsx56, jsxs as jsxs31 } from "react/jsx-runtime";
+function UiInput(_a) {
+  var _b = _a, {
+    ref,
+    label,
+    placeholder,
+    onChange,
+    className,
+    classNameDefault,
+    labelClassName,
+    inputClassName,
+    variant = "outline",
+    errorMessage,
+    htmlFormItemId: formItemId
+  } = _b, inputProps = __objRest(_b, [
+    "ref",
+    "label",
+    "placeholder",
+    "onChange",
+    "className",
+    "classNameDefault",
+    "labelClassName",
+    "inputClassName",
+    "variant",
+    "errorMessage",
+    "htmlFormItemId"
+  ]);
+  return /* @__PURE__ */ jsxs31("div", { className: cn("w-full", inputClassName), children: [
+    label ? /* @__PURE__ */ jsx56(
+      Label3,
+      {
+        ref,
+        className: cn(errorMessage && "text-destructive", labelClassName),
+        htmlFor: formItemId,
+        children: label
+      }
+    ) : null,
+    /* @__PURE__ */ jsx56(
+      Input,
+      __spreadProps(__spreadValues({}, inputProps), {
+        onChange,
+        placeholder,
+        className: cn(
+          "bg-input px-[0.9rem] py-5",
+          className,
+          variants3[variant]
+        ),
+        classNameDefault
+      })
+    ),
+    errorMessage ? /* @__PURE__ */ jsx56("p", { className: "text-sm text-destructive mt-1 ", children: errorMessage }) : null
+  ] });
+}
 export {
   Accordion,
   AccordionContent,
@@ -8658,7 +9035,7 @@ export {
   SelectSeparator,
   SelectTrigger,
   SelectValue,
-  Separator5 as Separator,
+  Separator6 as Separator,
   Sheet,
   SheetClose,
   SheetContent,
@@ -8700,6 +9077,8 @@ export {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
+  UiInput,
+  UiSelect,
   badgeVariants,
   buttonVariants,
   cn,