auxalia-ui-kit 1.7.6 → 1.8.0

package/dist/index.cjs

@@ -43,6 +43,7 @@ __export(index_exports, {
   CollapsibleContent: () => CollapsibleContent,
   CollapsibleRoot: () => CollapsibleRoot,
   CollapsibleTrigger: () => CollapsibleTrigger,
+  Container: () => Container,
   ControlledTable: () => ControlledTable_default,
   Dialog: () => Dialog,
   DialogClose: () => DialogClose,
@@ -79,6 +80,7 @@ __export(index_exports, {
   FieldSeparator: () => FieldSeparator,
   FieldSet: () => FieldSet,
   FieldTitle: () => FieldTitle,
+  Icon: () => Icon2,
   Input: () => Input,
   Label: () => Label3,
   Pagination: () => Pagination,
@@ -108,6 +110,7 @@ __export(index_exports, {
   SkeletonAvatar: () => SkeletonAvatar,
   SkeletonCard: () => SkeletonCard,
   SkeletonText: () => SkeletonText,
+  Stack: () => Stack,
   Switch: () => Switch,
   Tabs: () => Tabs,
   TabsContent: () => TabsContent,
@@ -119,11 +122,22 @@ __export(index_exports, {
   TooltipProvider: () => TooltipProvider,
   TooltipTrigger: () => TooltipTrigger,
   badgeVariants: () => badgeVariants,
+  breakpoints: () => breakpoints,
   buttonVariants: () => buttonVariants,
   checkboxVariants: () => checkboxVariants,
   cn: () => cn,
+  containerVariants: () => containerVariants,
+  iconVariants: () => iconVariants,
   radioItemVariants: () => radioItemVariants,
-  tailwindPreset: () => tailwind_preset_default
+  stackVariants: () => stackVariants,
+  tailwindPreset: () => tailwind_preset_default,
+  useBreakpoint: () => useBreakpoint,
+  useClickOutside: () => useClickOutside,
+  useDebounce: () => useDebounce2,
+  useLocalStorage: () => useLocalStorage,
+  useMediaQuery: () => useMediaQuery,
+  usePrevious: () => usePrevious2,
+  useTheme: () => useTheme
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -4708,7 +4722,7 @@ var RemoveScroll = React34.forwardRef(function(props, parentRef) {
     onWheelCapture: nothing,
     onTouchMoveCapture: nothing
   }), callbacks = _a[0], setCallbacks = _a[1];
-  var forwardProps = props.forwardProps, children = props.children, className = props.className, removeScrollBar = props.removeScrollBar, enabled = props.enabled, shards = props.shards, sideCar = props.sideCar, noRelative = props.noRelative, noIsolation = props.noIsolation, inert = props.inert, allowPinchZoom = props.allowPinchZoom, _b = props.as, Container = _b === void 0 ? "div" : _b, gapMode = props.gapMode, rest = __rest(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noRelative", "noIsolation", "inert", "allowPinchZoom", "as", "gapMode"]);
+  var forwardProps = props.forwardProps, children = props.children, className = props.className, removeScrollBar = props.removeScrollBar, enabled = props.enabled, shards = props.shards, sideCar = props.sideCar, noRelative = props.noRelative, noIsolation = props.noIsolation, inert = props.inert, allowPinchZoom = props.allowPinchZoom, _b = props.as, Container2 = _b === void 0 ? "div" : _b, gapMode = props.gapMode, rest = __rest(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noRelative", "noIsolation", "inert", "allowPinchZoom", "as", "gapMode"]);
   var SideCar2 = sideCar;
   var containerRef = useMergeRefs([ref, parentRef]);
   var containerProps = __assign(__assign({}, rest), callbacks);
@@ -4716,7 +4730,7 @@ var RemoveScroll = React34.forwardRef(function(props, parentRef) {
     React34.Fragment,
     null,
     enabled && React34.createElement(SideCar2, { sideCar: effectCar, removeScrollBar, shards, noRelative, noIsolation, inert, setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref, gapMode }),
-    forwardProps ? React34.cloneElement(React34.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef })) : React34.createElement(Container, __assign({}, containerProps, { className, ref: containerRef }), children)
+    forwardProps ? React34.cloneElement(React34.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef })) : React34.createElement(Container2, __assign({}, containerProps, { className, ref: containerRef }), children)
   );
 });
 RemoveScroll.defaultProps = {
@@ -6569,6 +6583,137 @@ function Text({ size: size4 = "md", className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: cn(textVariants({ size: size4 }), className), ...props });
 }
 
+// src/components/Icon/index.tsx
+var React41 = __toESM(require("react"), 1);
+
+// src/components/Icon/icon.styles.ts
+var import_class_variance_authority15 = require("class-variance-authority");
+var iconVariants = (0, import_class_variance_authority15.cva)("shrink-0", {
+  variants: {
+    size: {
+      xs: "size-3",
+      sm: "size-4",
+      md: "size-5",
+      lg: "size-6",
+      xl: "size-8"
+    },
+    color: {
+      default: "text-content",
+      muted: "text-muted",
+      dim: "text-dim",
+      primary: "text-primary",
+      success: "text-success",
+      warning: "text-warning",
+      destructive: "text-destructive",
+      info: "text-info"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    color: "default"
+  }
+});
+
+// src/components/Icon/index.tsx
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var Icon2 = React41.forwardRef(
+  ({ icon: IconComponent, size: size4, color, strokeWidth = 2, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    IconComponent,
+    {
+      ref,
+      strokeWidth,
+      className: cn(iconVariants({ size: size4, color }), className),
+      ...props
+    }
+  )
+);
+Icon2.displayName = "Icon";
+
+// src/components/Container.tsx
+var React42 = __toESM(require("react"), 1);
+var import_class_variance_authority16 = require("class-variance-authority");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var containerVariants = (0, import_class_variance_authority16.cva)("mx-auto w-full", {
+  variants: {
+    size: {
+      sm: "max-w-screen-sm",
+      md: "max-w-screen-md",
+      lg: "max-w-screen-lg",
+      xl: "max-w-screen-xl",
+      "2xl": "max-w-screen-2xl",
+      full: "max-w-full"
+    },
+    padding: {
+      none: "",
+      sm: "px-4",
+      md: "px-4 sm:px-6",
+      lg: "px-4 sm:px-6 lg:px-8"
+    }
+  },
+  defaultVariants: {
+    size: "xl",
+    padding: "md"
+  }
+});
+var Container = React42.forwardRef(
+  ({ className, size: size4, padding, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { ref, className: cn(containerVariants({ size: size4, padding }), className), ...props })
+);
+Container.displayName = "Container";
+
+// src/components/Stack.tsx
+var React43 = __toESM(require("react"), 1);
+var import_class_variance_authority17 = require("class-variance-authority");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var stackVariants = (0, import_class_variance_authority17.cva)("flex", {
+  variants: {
+    direction: {
+      vertical: "flex-col",
+      horizontal: "flex-row"
+    },
+    gap: {
+      none: "gap-0",
+      xs: "gap-1",
+      sm: "gap-2",
+      md: "gap-4",
+      lg: "gap-6",
+      xl: "gap-8"
+    },
+    align: {
+      start: "items-start",
+      center: "items-center",
+      end: "items-end",
+      stretch: "items-stretch",
+      baseline: "items-baseline"
+    },
+    justify: {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end",
+      between: "justify-between",
+      around: "justify-around"
+    },
+    wrap: {
+      true: "flex-wrap",
+      false: "flex-nowrap"
+    }
+  },
+  defaultVariants: {
+    direction: "vertical",
+    gap: "md"
+  }
+});
+var Stack = React43.forwardRef(
+  ({ className, direction, gap, align, justify, wrap, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    "div",
+    {
+      ref,
+      className: cn(stackVariants({ direction, gap, align, justify, wrap }), className),
+      ...props
+    }
+  )
+);
+Stack.displayName = "Stack";
+
 // src/components/ControlledTable/index.tsx
 var import_react11 = require("react");
 var import_radix_ui8 = require("radix-ui");
@@ -6597,7 +6742,7 @@ function useDebounce(value, delay) {
 var useDebounce_default = useDebounce;
 
 // src/components/ControlledTable/SimpleSearch.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var SimpleSearch = ({
   searchValue,
   onSearchCallback,
@@ -6616,9 +6761,9 @@ var SimpleSearch = ({
     }
     onSearchCallback?.(debouncedValue);
   }, [debouncedValue]);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react6.SearchIcon, { size: 16, className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted" }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react6.SearchIcon, { size: 16, className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted" }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       Input,
       {
         value: localValue,
@@ -6633,7 +6778,7 @@ var SimpleSearch_default = SimpleSearch;
 
 // src/components/ControlledTable/tableFilter/filterItem/filterSelect/index.tsx
 var import_react9 = __toESM(require("react"), 1);
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var CustomFilterSelect = ({
   field,
   onFilterCallback,
@@ -6668,18 +6813,18 @@ var CustomFilterSelect = ({
     const actualValue = value === "__none__" ? "" : value;
     setSearchTerm({ [field.id]: actualValue });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: `min-w-50 ${className ?? ""}`, children: [
-    field.label && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "mb-1.5 text-sm text-neutral-600", children: field.label }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: `min-w-50 ${className ?? ""}`, children: [
+    field.label && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "mb-1.5 text-sm text-neutral-600", children: field.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
       Select2,
       {
         value: searchTerm?.[field.id] ? String(searchTerm[field.id]) : "__none__",
         onValueChange: handleValueChange,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectTrigger2, { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectValue2, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(SelectContent2, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectItem2, { value: "__none__", children: field.insteadNone ?? "None" }),
-            modifiedOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectItem2, { value: String(opt.id ?? opt.value), children: opt.title ?? opt.label }, String(opt.id ?? opt.value)))
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SelectTrigger2, { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SelectValue2, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(SelectContent2, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SelectItem2, { value: "__none__", children: field.insteadNone ?? "None" }),
+            modifiedOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SelectItem2, { value: String(opt.id ?? opt.value), children: opt.title ?? opt.label }, String(opt.id ?? opt.value)))
           ] })
         ]
       }
@@ -6689,7 +6834,7 @@ var CustomFilterSelect = ({
 var filterSelect_default = CustomFilterSelect;
 
 // src/components/ControlledTable/tableFilter/filterItem/index.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var FIELD_TYPE_COMPONENT_MAP = [
   {
     types: ["select"],
@@ -6704,7 +6849,7 @@ var FilterItem = ({ field, searchValue, filteredParams, onFilterCallback }) => {
   if (!config) return null;
   const { component: Component, extraProps } = config;
   const additionalProps = typeof extraProps === "function" ? extraProps(field) : extraProps;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     Component,
     {
       field,
@@ -6719,13 +6864,13 @@ var FilterItem = ({ field, searchValue, filteredParams, onFilterCallback }) => {
 var filterItem_default = FilterItem;
 
 // src/components/ControlledTable/tableFilter/index.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var TableFilter = ({ filterFields, filteredParams, onFilterCallback }) => {
   if (!filterFields || filterFields.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex flex-wrap items-end gap-4", children: filterFields.map((field) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex flex-wrap items-end gap-4", children: filterFields.map((field) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       filterItem_default,
       {
         field,
@@ -6740,7 +6885,7 @@ var TableFilter = ({ filterFields, filteredParams, onFilterCallback }) => {
 var tableFilter_default = TableFilter;
 
 // src/components/ControlledTable/toolbar/index.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var CommonToolbar = ({
   title,
   searchValue,
@@ -6752,18 +6897,18 @@ var CommonToolbar = ({
   onFilterCallback
 }) => {
   const [isFilterOpen, setIsFilterOpen] = (0, import_react10.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "px-4 pt-3 text-base font-semibold uppercase tracking-wide text-content", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center justify-between gap-4 border-b border-card-hover bg-card px-4 py-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center gap-3", children: [
-        filterFields && filterFields.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Button, { variant: "outline", size: "sm", onClick: () => setIsFilterOpen((prev) => !prev), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react7.Filter, { size: 14, className: "mr-1" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "px-4 pt-3 text-base font-semibold uppercase tracking-wide text-content", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center justify-between gap-4 border-b border-card-hover bg-card px-4 py-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center gap-3", children: [
+        filterFields && filterFields.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Button, { variant: "outline", size: "sm", onClick: () => setIsFilterOpen((prev) => !prev), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react7.Filter, { size: 14, className: "mr-1" }),
             "Filters"
           ] }),
-          numSelected > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1.5 text-xs font-medium text-white", children: numSelected })
+          numSelected > 0 && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1.5 text-xs font-medium text-white", children: numSelected })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "max-w-90 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "max-w-90 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           SimpleSearch_default,
           {
             searchValue,
@@ -6772,9 +6917,9 @@ var CommonToolbar = ({
           }
         ) })
       ] }),
-      toolbarActions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex items-center gap-2", children: renderToolbarActions(toolbarActions, numSelected) })
+      toolbarActions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex items-center gap-2", children: renderToolbarActions(toolbarActions, numSelected) })
     ] }),
-    filterFields && filterFields.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CollapsibleRoot, { open: isFilterOpen, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CollapsibleContent, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "rounded-sm border border-border p-4", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    filterFields && filterFields.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CollapsibleRoot, { open: isFilterOpen, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CollapsibleContent, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "rounded-sm border border-border p-4", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       tableFilter_default,
       {
         filterFields,
@@ -6788,15 +6933,15 @@ function renderToolbarActions(actions, numSelected) {
   if (!actions || actions.length === 0) return null;
   return actions.map((item) => {
     const isTitleView = Object.keys(item).includes("titleView") ? item.titleView : true;
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
       Button,
       {
         variant: "outline",
         onClick: () => item.callback(),
         disabled: item.visibleWithoutSelection ? false : numSelected === 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "mr-1", children: getIconForAction(item.action) }),
-          isTitleView && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { children: item.label ?? item.action })
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "mr-1", children: getIconForAction(item.action) }),
+          isTitleView && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children: item.label ?? item.action })
         ]
       },
       item.action
@@ -6807,29 +6952,29 @@ function getIconForAction(action) {
   const cls = "h-4 w-4";
   switch (action) {
     case "delete":
-      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react7.Trash2, { className: cls });
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react7.Trash2, { className: cls });
     case "edit":
-      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react7.Edit, { className: cls });
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react7.Edit, { className: cls });
     case "download":
-      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react7.Download, { className: cls });
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react7.Download, { className: cls });
     case "open":
-      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react7.Eye, { className: cls });
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react7.Eye, { className: cls });
     case "clone":
-      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react7.Copy, { className: cls });
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react7.Copy, { className: cls });
     case "create":
-      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react7.Plus, { className: cls });
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react7.Plus, { className: cls });
     case "upload":
-      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react7.Upload, { className: cls });
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react7.Upload, { className: cls });
     case "view":
-      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react7.Eye, { className: cls });
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react7.Eye, { className: cls });
     case "check":
-      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react7.ListCheckIcon, { className: cls });
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react7.ListCheckIcon, { className: cls });
     case "print":
-      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react7.FileTextIcon, { className: cls });
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react7.FileTextIcon, { className: cls });
     case "compare":
-      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react7.Copy, { className: cls });
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react7.Copy, { className: cls });
     case "convert":
-      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react7.Upload, { className: cls });
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react7.Upload, { className: cls });
     default:
       return null;
   }
@@ -6837,7 +6982,7 @@ function getIconForAction(action) {
 var toolbar_default = CommonToolbar;
 
 // src/components/ControlledTable/ControlledPagination.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var ControlledPagination = ({
   currentPage,
   rowsPerPage,
@@ -6863,26 +7008,26 @@ var ControlledPagination = ({
     }
     return pages;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex w-full items-center justify-between text-content", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-center gap-2 text-base", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex w-full items-center justify-between text-content", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-2 text-base", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { children: [
         rowsPerPageLabel,
         ":"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
         Select2,
         {
           value: rowsPerPage.toString(),
           onValueChange: (value) => onRowsPerPageChange(parseInt(value, 10)),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SelectTrigger2, { className: "w-20", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SelectValue2, {}) }),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SelectContent2, { children: rowsPerPageOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SelectItem2, { value: option.toString(), children: option }, option)) })
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SelectTrigger2, { className: "w-20", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SelectValue2, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SelectContent2, { children: rowsPerPageOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SelectItem2, { value: option.toString(), children: option }, option)) })
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Pagination, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(PaginationContent, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Pagination, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(PaginationContent, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
         PaginationPrevious,
         {
           onClick: () => currentPage > 1 && onPageChange(currentPage - 1),
@@ -6890,7 +7035,7 @@ var ControlledPagination = ({
         }
       ) }),
       getPageNumbers().map(
-        (page, idx) => page === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PaginationEllipsis, {}) }, `ellipsis-${idx}`) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        (page, idx) => page === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PaginationEllipsis, {}) }, `ellipsis-${idx}`) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           PaginationLink,
           {
             onClick: () => onPageChange(page),
@@ -6900,7 +7045,7 @@ var ControlledPagination = ({
           }
         ) }, page)
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
         PaginationNext,
         {
           onClick: () => currentPage < totalPages && onPageChange(currentPage + 1),
@@ -6913,7 +7058,7 @@ var ControlledPagination = ({
 var ControlledPagination_default = ControlledPagination;
 
 // src/components/ControlledTable/index.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var ControlledTable = ({
   tableSource,
   tableConfig,
@@ -7009,7 +7154,7 @@ var ControlledTable = ({
       if (field.renderLink) {
         return field.renderLink(to, rawValue);
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
         "a",
         {
           href: to,
@@ -7021,22 +7166,22 @@ var ControlledTable = ({
       );
     }
     if (field.type === "img") {
-      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("img", { src: rawValue, alt: "", className: "h-auto max-w-full" });
+      return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("img", { src: rawValue, alt: "", className: "h-auto max-w-full" });
     }
     if (field.type === "bool") {
-      return rawValue ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react8.Check, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react8.X, { size: 16 });
+      return rawValue ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react8.Check, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react8.X, { size: 16 });
     }
     const content = rawValue ?? "";
     if (field.withTooltip) {
-      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Tooltip, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "block max-w-50 truncate", children: content }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TooltipContent, { children: content })
+      return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Tooltip, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "block max-w-50 truncate", children: content }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TooltipContent, { children: content })
       ] }) });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { children: content });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "overflow-hidden rounded-sm border border-border", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "overflow-hidden rounded-sm border border-border", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       toolbar_default,
       {
         title,
@@ -7049,35 +7194,35 @@ var ControlledTable = ({
         onFilterCallback
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "relative overflow-hidden", children: [
-      loading && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-card/60", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("table", { className: "w-full text-base", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("thead", { className: "border-b border-card-hover bg-surface text-dim", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("tr", { children: [
-          isSelectable && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("th", { className: "w-10 px-3 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "relative overflow-hidden", children: [
+      loading && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-card/60", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("table", { className: "w-full text-base", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("thead", { className: "border-b border-card-hover bg-surface text-dim", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("tr", { children: [
+          isSelectable && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("th", { className: "w-10 px-3 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
             import_radix_ui8.Checkbox.Root,
             {
               checked: allSelected,
               onCheckedChange: handleSelectAll,
               className: "flex h-4 w-4 items-center justify-center rounded border border-border-input bg-white dark:bg-white/5 data-[state=checked]:border-primary data-[state=checked]:bg-primary",
-              children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_radix_ui8.Checkbox.Indicator, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react8.CheckIcon, { size: 10, className: "text-primary-foreground" }) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_radix_ui8.Checkbox.Indicator, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react8.CheckIcon, { size: 10, className: "text-primary-foreground" }) })
             }
           ) }),
           fields.map((field) => {
             const id = field.orderField || field.id;
             const isSorted = sortObj?.field === id;
-            return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
               "th",
               {
                 className: `px-3 py-3 text-base font-medium ${field.headAlign === "center" ? "text-center" : field.headAlign === "right" ? "text-right" : "text-left"} ${field.sortable ? "cursor-pointer select-none hover:text-primary" : ""}`,
                 style: { width: field.width },
                 onClick: () => field.sortable && handleSort(field),
-                children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
                   "div",
                   {
                     className: `inline-flex items-center gap-1 ${field.headAlign === "center" ? "justify-center" : ""}`,
                     children: [
                       field.label ?? "",
-                      field.sortable && (isSorted ? sortObj?.order === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react8.ArrowUp, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react8.ArrowDown, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react8.ArrowUpDown, { size: 14, className: "opacity-40" }))
+                      field.sortable && (isSorted ? sortObj?.order === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react8.ArrowUp, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react8.ArrowDown, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react8.ArrowUpDown, { size: 14, className: "opacity-40" }))
                     ]
                   }
                 )
@@ -7085,9 +7230,9 @@ var ControlledTable = ({
               field.id
             );
           }),
-          hasActions && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("th", { className: "w-10 px-3 py-3" })
+          hasActions && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("th", { className: "w-10 px-3 py-3" })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("tbody", { children: tableData.length === 0 && !loading ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("tbody", { children: tableData.length === 0 && !loading ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           "td",
           {
             colSpan: fields.length + (isSelectable ? 1 : 0) + (hasActions ? 1 : 0),
@@ -7097,13 +7242,13 @@ var ControlledTable = ({
         ) }) : tableData.map((record) => {
           const key = record[rowUniqueKey];
           const isSelected = selectedRows.includes(key);
-          return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
             "tr",
             {
               onClick: () => onRowClick?.(record),
               className: `border-b border-card-hover bg-card last:border-b-0 transition-colors ${onRowClick ? "cursor-pointer" : ""} ${isSelected ? "bg-primary/5" : "hover:bg-card-hover"}`,
               children: [
-                isSelectable && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                isSelectable && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                   "td",
                   {
                     className: "w-10 px-3 py-3",
@@ -7111,18 +7256,18 @@ var ControlledTable = ({
                       e.stopPropagation();
                       handleSelectRow(key);
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                       import_radix_ui8.Checkbox.Root,
                       {
                         checked: isSelected,
                         onCheckedChange: () => handleSelectRow(key),
                         className: "flex h-4 w-4 items-center justify-center rounded border border-border-input bg-white dark:bg-white/5 data-[state=checked]:border-primary data-[state=checked]:bg-primary",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_radix_ui8.Checkbox.Indicator, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react8.CheckIcon, { size: 10, className: "text-primary-foreground" }) })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_radix_ui8.Checkbox.Indicator, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react8.CheckIcon, { size: 10, className: "text-primary-foreground" }) })
                       }
                     )
                   }
                 ),
-                fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                   "td",
                   {
                     className: `px-3 py-3 text-base font-normal text-content ${field.textAlign === "center" ? "text-center" : field.textAlign === "right" ? "text-right" : "text-left"}`,
@@ -7131,24 +7276,24 @@ var ControlledTable = ({
                   },
                   field.id
                 )),
-                hasActions && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("td", { className: "px-3 py-3", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-1", children: [
-                  withEditAction && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                hasActions && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("td", { className: "px-3 py-3", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex items-center gap-1", children: [
+                  withEditAction && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                     "button",
                     {
                       className: "inline-flex h-7 w-7 items-center justify-center rounded hover:bg-surface-hover",
                       onClick: () => handleEditAction?.(record.id),
-                      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react8.Edit, { size: 15 })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react8.Edit, { size: 15 })
                     }
                   ),
-                  withDownloadAction && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                  withDownloadAction && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                     "button",
                     {
                       className: "inline-flex h-7 w-7 items-center justify-center rounded hover:bg-surface-hover",
                       onClick: () => handleDownloadAction?.(record.id),
-                      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react8.Download, { size: 15 })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react8.Download, { size: 15 })
                     }
                   ),
-                  withOpenAction && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                  withOpenAction && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                     "button",
                     {
                       className: "inline-flex h-7 w-7 items-center justify-center rounded hover:bg-surface-hover",
@@ -7157,23 +7302,23 @@ var ControlledTable = ({
                         else if (openPath) window.location.href = openPath(record);
                         else if (handleClickIcon) handleClickIcon(record);
                       },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react8.Eye, { size: 15 })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react8.Eye, { size: 15 })
                     }
                   ),
-                  withCloneAction && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                  withCloneAction && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                     "button",
                     {
                       className: "inline-flex h-7 w-7 items-center justify-center rounded hover:bg-surface-hover",
                       onClick: () => handleClickIcon?.(record),
-                      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react8.Copy, { size: 15 })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react8.Copy, { size: 15 })
                     }
                   ),
-                  withRemoveAction && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                  withRemoveAction && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                     "button",
                     {
                       className: "inline-flex h-7 w-7 items-center justify-center rounded text-destructive hover:bg-destructive/10",
                       onClick: () => handleRemoveAction?.(record.id),
-                      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react8.Trash2, { size: 15 })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react8.Trash2, { size: 15 })
                     }
                   )
                 ] }) })
@@ -7184,7 +7329,7 @@ var ControlledTable = ({
         }) })
       ] }) })
     ] }),
-    withPagination && totalCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "border-t border-card-hover bg-card px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    withPagination && totalCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "border-t border-card-hover bg-card px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       ControlledPagination_default,
       {
         currentPage,
@@ -7199,6 +7344,135 @@ var ControlledTable = ({
 };
 var ControlledTable_default = ControlledTable;
 
+// src/hooks/useMediaQuery.ts
+var import_react12 = require("react");
+
+// src/hooks/breakpoints.ts
+var breakpoints = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536
+};
+
+// src/hooks/useMediaQuery.ts
+function useMediaQuery(query) {
+  const [matches, setMatches] = (0, import_react12.useState)(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia(query).matches;
+  });
+  (0, import_react12.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const mql = window.matchMedia(query);
+    setMatches(mql.matches);
+    const handler = (e) => setMatches(e.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, [query]);
+  return matches;
+}
+function useBreakpoint(bp) {
+  return useMediaQuery(`(min-width: ${breakpoints[bp]}px)`);
+}
+
+// src/hooks/useLocalStorage.ts
+var import_react13 = require("react");
+function useLocalStorage(key, initialValue) {
+  const [storedValue, setStoredValue] = (0, import_react13.useState)(() => {
+    if (typeof window === "undefined") return initialValue;
+    try {
+      const item = window.localStorage.getItem(key);
+      return item !== null ? JSON.parse(item) : initialValue;
+    } catch {
+      return initialValue;
+    }
+  });
+  const setValue = (0, import_react13.useCallback)(
+    (value) => {
+      setStoredValue((prev) => {
+        const next = typeof value === "function" ? value(prev) : value;
+        try {
+          window.localStorage.setItem(key, JSON.stringify(next));
+        } catch {
+        }
+        return next;
+      });
+    },
+    [key]
+  );
+  const removeValue = (0, import_react13.useCallback)(() => {
+    setStoredValue(initialValue);
+    try {
+      window.localStorage.removeItem(key);
+    } catch {
+    }
+  }, [key, initialValue]);
+  return [storedValue, setValue, removeValue];
+}
+
+// src/hooks/usePrevious.ts
+var import_react14 = require("react");
+function usePrevious2(value) {
+  const ref = (0, import_react14.useRef)(void 0);
+  (0, import_react14.useEffect)(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+
+// src/hooks/useClickOutside.ts
+var import_react15 = require("react");
+function useClickOutside(ref, handler) {
+  (0, import_react15.useEffect)(() => {
+    const listener = (event) => {
+      if (!ref.current || ref.current.contains(event.target)) return;
+      handler(event);
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [ref, handler]);
+}
+
+// src/hooks/useDebounce.ts
+var import_react16 = require("react");
+function useDebounce2(value, delay) {
+  const [debouncedValue, setDebouncedValue] = (0, import_react16.useState)(value);
+  (0, import_react16.useEffect)(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+  return debouncedValue;
+}
+
+// src/hooks/useTheme.ts
+var import_react17 = require("react");
+function useTheme(storageKey = "auxalia-theme") {
+  const [theme, setThemeState] = (0, import_react17.useState)(() => {
+    if (typeof window === "undefined") return "system";
+    return localStorage.getItem(storageKey) ?? "system";
+  });
+  const resolvedTheme = theme === "system" ? typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : theme;
+  (0, import_react17.useEffect)(() => {
+    document.documentElement.classList.toggle("dark", resolvedTheme === "dark");
+  }, [resolvedTheme]);
+  const setTheme = (0, import_react17.useCallback)(
+    (next) => {
+      setThemeState(next);
+      try {
+        localStorage.setItem(storageKey, next);
+      } catch {
+      }
+    },
+    [storageKey]
+  );
+  return { theme, resolvedTheme, setTheme };
+}
+
 // src/tailwind.preset.ts
 var auxaliaColors = {
   // Primary brand: Brand Green — values live in tokens.css as --color-auxalia-green-*
@@ -7406,6 +7680,7 @@ var AuxaliaTokens = {
   CollapsibleContent,
   CollapsibleRoot,
   CollapsibleTrigger,
+  Container,
   ControlledTable,
   Dialog,
   DialogClose,
@@ -7442,6 +7717,7 @@ var AuxaliaTokens = {
   FieldSeparator,
   FieldSet,
   FieldTitle,
+  Icon,
   Input,
   Label,
   Pagination,
@@ -7471,6 +7747,7 @@ var AuxaliaTokens = {
   SkeletonAvatar,
   SkeletonCard,
   SkeletonText,
+  Stack,
   Switch,
   Tabs,
   TabsContent,
@@ -7482,9 +7759,20 @@ var AuxaliaTokens = {
   TooltipProvider,
   TooltipTrigger,
   badgeVariants,
+  breakpoints,
   buttonVariants,
   checkboxVariants,
   cn,
+  containerVariants,
+  iconVariants,
   radioItemVariants,
-  tailwindPreset
+  stackVariants,
+  tailwindPreset,
+  useBreakpoint,
+  useClickOutside,
+  useDebounce,
+  useLocalStorage,
+  useMediaQuery,
+  usePrevious,
+  useTheme
 });