auxalia-ui-kit 1.6.9 → 1.7.0

package/README.md

@@ -1,47 +1,25 @@
 # Auxalia UI — `auxalia-ui-kit`
 
-A modern, accessible React component library built with **TypeScript**, **Radix UI**, and **Tailwind CSS v4**. Designed for seamless integration into large-scale projects.
+A modern, accessible React component library built with **TypeScript**, **Radix UI**, and **Tailwind CSS v4**.
 
 [![npm version](https://img.shields.io/npm/v/auxalia-ui-kit)](https://www.npmjs.com/package/auxalia-ui-kit)
 [![License: ISC](https://img.shields.io/badge/License-ISC-blue.svg)](https://opensource.org/licenses/ISC)
 
 ---
 
-## Table of Contents
+## Overview
 
-- [Features](#features)
-- [Requirements](#requirements)
-- [Installation](#installation)
-- [Setup](#setup)
-- [Components](#components)
-- [Tailwind Preset](#tailwind-preset)
-- [Design Tokens](#design-tokens)
-- [Development](#development)
-- [License](#license)
+`auxalia-ui-kit` is a design system library for React apps. It ships a Tailwind v4 preset, component primitives, and runtime design tokens for light/dark theming.
 
----
-
-## Features
-
-- **Customizable** — CVA-powered variants for predictable, type-safe styling
-- **Accessible** — Built on Radix UI primitives, WCAG compliant
-- **Tree-Shakeable** — ESM + CJS dual output for optimal bundle size
-- **Type-Safe** — Full TypeScript with strict types
-- **Dark Mode** — All components support light/dark themes via CSS class
-- **Tailwind v4** — Ships a Tailwind preset with Auxalia brand tokens
-- **Storybook** — Interactive component explorer included
-
----
+## Docs
 
-## Requirements
+This repository stores the source documentation in `docs/`:
 
-| Dependency   | Version  |
-|-------------|----------|
-| React        | ^19.2.0  |
-| react-dom    | ^19.2.0  |
-| tailwindcss  | ^4.0.0   |
+- `docs/CODE_RULES.md`
+- `docs/MAKING_CHANGES.md`
+- `docs/TABLE_SETUP.md`
 
----
+For component usage and design token guidance, consult the Storybook and source files.
 
 ## Installation
 
@@ -49,314 +27,34 @@ A modern, accessible React component library built with **TypeScript**, **Radix
 npm install auxalia-ui-kit
 ```
 
----
-
-## Setup
+## Quick Start
 
-### 1. Import styles
-
-In your app's entry CSS file:
+Import the library styles and use components in your React app:
 
 ```css
+/* app.css */
 @import 'auxalia-ui-kit/styles.css';
 ```
 
-Or import the design tokens separately:
-
-```css
-@import 'auxalia-ui-kit/tokens.css';
-```
-
-### 2. Configure Tailwind v4
-
-In your CSS config file (e.g. `app.css`):
-
-```css
-@import 'tailwindcss';
-@import 'auxalia-ui-kit/tokens.css';
-```
-
-Or use the Tailwind preset in your `tailwind.config.ts`:
-
-```ts
-import auxaliaPreset from 'auxalia-ui-kit/tailwind.preset';
-
-export default {
-  presets: [auxaliaPreset],
-};
-```
-
-### 3. Use components
-
 ```tsx
 import { Button } from 'auxalia-ui-kit';
 
 export default function App() {
-  return <Button variant="default" color="primary">Click me</Button>;
+  return <Button variant="default">Click me</Button>;
 }
 ```
 
----
-
-## Components
-
-### Button
-
-```tsx
-import { Button } from 'auxalia-ui-kit';
-
-<Button variant="default" color="primary" size="default">Save</Button>
-<Button variant="outline" color="secondary">Cancel</Button>
-<Button variant="ghost" color="destructive" size="sm">Delete</Button>
-```
-
-| Prop      | Type                                                   | Default     |
-|-----------|--------------------------------------------------------|-------------|
-| `variant` | `'default' \| 'outline' \| 'ghost' \| 'link'`         | `'default'` |
-| `color`   | `'default' \| 'primary' \| 'secondary' \| 'accent' \| 'destructive'` | `'primary'` |
-| `size`    | `'sm' \| 'default' \| 'lg' \| 'icon'`                 | `'default'` |
-| `asChild` | `boolean`                                              | `false`     |
-
----
-
-### Card
-
-```tsx
-import { Card } from 'auxalia-ui-kit';
-
-<Card variant="default">Content</Card>
-<Card variant="elevated">Elevated</Card>
-<Card variant="outlined">Outlined</Card>
-```
-
-| Prop      | Type                                                                       | Default     |
-|-----------|----------------------------------------------------------------------------|-------------|
-| `variant` | `'default' \| 'outlined' \| 'elevated' \| 'success' \| 'accent' \| 'secondary'` | `'default'` |
-
----
-
-### Input
-
-```tsx
-import { Input } from 'auxalia-ui-kit';
-
-<Input placeholder="Enter text..." />
-<Input size="lg" variant="error" />
-```
-
-| Prop      | Type                       | Default     |
-|-----------|----------------------------|-------------|
-| `variant` | `'default' \| 'error'`     | `'default'` |
-| `size`    | `'sm' \| 'md' \| 'lg'`    | `'md'`      |
-
----
-
-### Select
-
-```tsx
-import {
-  Select, SelectTrigger, SelectValue,
-  SelectContent, SelectItem
-} from 'auxalia-ui-kit';
-
-<Select>
-  <SelectTrigger variant="primary" size="md">
-    <SelectValue placeholder="Pick one" />
-  </SelectTrigger>
-  <SelectContent>
-    <SelectItem value="a">Option A</SelectItem>
-    <SelectItem value="b">Option B</SelectItem>
-  </SelectContent>
-</Select>
-```
-
-**SelectTrigger variants:** `'default' | 'primary' | 'secondary' | 'accent' | 'destructive' | 'error'`
-
-**SelectTrigger sizes:** `'sm' | 'md' | 'lg'`
-
-**SelectItem variants:** `'default' | 'primary' | 'secondary' | 'accent' | 'destructive'`
-
----
-
-### DropdownMenu
-
-```tsx
-import {
-  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
-  DropdownMenuItem, DropdownMenuSeparator, DropdownMenuLabel
-} from 'auxalia-ui-kit';
-
-<DropdownMenu>
-  <DropdownMenuTrigger>Open</DropdownMenuTrigger>
-  <DropdownMenuContent>
-    <DropdownMenuLabel>Actions</DropdownMenuLabel>
-    <DropdownMenuSeparator />
-    <DropdownMenuItem variant="default">Edit</DropdownMenuItem>
-    <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
-  </DropdownMenuContent>
-</DropdownMenu>
-```
-
-**DropdownMenuItem variants:** `'default' | 'primary' | 'secondary' | 'accent' | 'destructive'`
-
-Also exports: `DropdownMenuCheckboxItem`, `DropdownMenuRadioItem`, `DropdownMenuRadioGroup`,
-`DropdownMenuGroup`, `DropdownMenuSub`, `DropdownMenuSubTrigger`, `DropdownMenuSubContent`,
-`DropdownMenuShortcut`, `DropdownMenuPortal`
-
----
-
-### Tabs
-
-```tsx
-import { Tabs, TabsList, TabsTrigger, TabsContent } from 'auxalia-ui-kit';
-
-const [tab, setTab] = useState('overview');
-
-<Tabs value={tab} onValueChange={setTab}>
-  <TabsList>
-    <TabsTrigger value="overview">Overview</TabsTrigger>
-    <TabsTrigger value="settings">Settings</TabsTrigger>
-  </TabsList>
-  <TabsContent value="overview">Overview content</TabsContent>
-  <TabsContent value="settings">Settings content</TabsContent>
-</Tabs>
-```
-
----
-
-### Text
-
-```tsx
-import { Text } from 'auxalia-ui-kit';
-
-<Text size="xl" align="center">Hello World</Text>
-```
-
-| Prop    | Type                                        | Default  |
-|---------|---------------------------------------------|----------|
-| `size`  | `'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl'` | `'md'`  |
-| `align` | `'left' \| 'center' \| 'right'`            | `'left'` |
-
----
-
-### Field (Form Wrapper)
-
-```tsx
-import {
-  Field, FieldLabel, FieldDescription, FieldError
-} from 'auxalia-ui-kit';
-
-<Field orientation="vertical">
-  <FieldLabel>Email</FieldLabel>
-  <Input type="email" />
-  <FieldDescription>We'll never share your email.</FieldDescription>
-  <FieldError errors={['Email is required']} />
-</Field>
-```
-
-**Orientation:** `'vertical'` (default) | `'horizontal'` | `'responsive'`
-
-Also exports: `FieldContent`, `FieldGroup`, `FieldSet`, `FieldLegend`, `FieldSeparator`, `FieldTitle`
-
----
-
-### Tooltip
-
-```tsx
-import { Tooltip, TooltipTrigger, TooltipContent } from 'auxalia-ui-kit';
-
-<Tooltip>
-  <TooltipTrigger>Hover me</TooltipTrigger>
-  <TooltipContent>Helpful hint</TooltipContent>
-</Tooltip>
-```
-
-Also exports: `TooltipProvider`
-
----
-
-### Popover
-
-```tsx
-import { Popover, PopoverTrigger, PopoverContent } from 'auxalia-ui-kit';
-
-<Popover>
-  <PopoverTrigger>Open</PopoverTrigger>
-  <PopoverContent>Popover content here</PopoverContent>
-</Popover>
-```
-
-Also exports: `PopoverAnchor`
-
----
-
-### Pagination
-
-```tsx
-import {
-  Pagination, PaginationContent, PaginationItem,
-  PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis
-} from 'auxalia-ui-kit';
-
-<Pagination>
-  <PaginationContent>
-    <PaginationItem><PaginationPrevious href="#" /></PaginationItem>
-    <PaginationItem><PaginationLink href="#" isActive>1</PaginationLink></PaginationItem>
-    <PaginationItem><PaginationLink href="#">2</PaginationLink></PaginationItem>
-    <PaginationItem><PaginationEllipsis /></PaginationItem>
-    <PaginationItem><PaginationNext href="#" /></PaginationItem>
-  </PaginationContent>
-</Pagination>
-```
-
----
-
-### Collapsible
-
-```tsx
-import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent } from 'auxalia-ui-kit';
-
-<CollapsibleRoot>
-  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
-  <CollapsibleContent>Hidden content</CollapsibleContent>
-</CollapsibleRoot>
-```
-
----
-
-### Label
-
-```tsx
-import { Label } from 'auxalia-ui-kit';
+## Development
 
-<Label htmlFor="email">Email address</Label>
+```bash
+npm install
+npm run storybook
+npm run build-storybook
 ```
 
----
-
-### TableView
-
-A full-featured controlled data table with sorting, filtering, pagination, and search.
-
-```tsx
-import { TableView } from 'auxalia-ui-kit';
-import type { TableField, TableConfig } from 'auxalia-ui-kit';
-
-const fields: TableField[] = [
-  { key: 'name', label: 'Name', sortable: true },
-  { key: 'email', label: 'Email' },
-];
-
-<TableView
-  data={rows}
-  fields={fields}
-  config={config}
-  queryParams={queryParams}
-  onQueryChange={setQueryParams}
-/>
-```
+## License
 
----
+ISC — [Auxalia](https://github.com/Artur-Badalyan/auxalia-ui-kit)
 
 ## Tailwind Preset
 
@@ -372,12 +70,12 @@ export default {
 
 **Brand colors available in Tailwind utilities:**
 
-| Token              | Value       | Usage                    |
-|--------------------|-------------|--------------------------|
-| `primary`          | #A7D500     | Auxalia Green            |
-| `secondary`        | #3e6897     | Auxalia Blue             |
-| `accent`           | #0f868b     | Auxalia Petrol           |
-| `destructive`      | #dc2626     | Errors / danger          |
+| Token              | Value        | Usage                   |
+| ------------------ | ------------ | ----------------------- |
+| `primary`          | #A7D500      | Auxalia Green           |
+| `secondary`        | #3e6897      | Auxalia Blue            |
+| `accent`           | #0f868b      | Auxalia Petrol          |
+| `destructive`      | #dc2626      | Errors / danger         |
 | `auxalia-green-*`  | 50–900 scale | Extended green palette  |
 | `auxalia-blue-*`   | 50–900 scale | Extended blue palette   |
 | `auxalia-petrol-*` | 50–900 scale | Extended petrol palette |
@@ -401,24 +99,3 @@ Tokens are exposed as CSS custom properties and can be used independently:
   background: rgb(var(--color-surface));
 }
 ```
-
----
-
-## Development
-
-```bash
-# Install dependencies
-npm install
-
-# Run Storybook (port 6006)
-npm run storybook
-
-# Build static Storybook
-npm run build-storybook
-```
-
----
-
-## License
-
-ISC — [Auxalia](https://github.com/Artur-Badalyan/auxalia-ui-kit)

package/dist/index.cjs

@@ -6688,25 +6688,52 @@ function Text({ size: size4 = "md", className, ...props }) {
 }
 
 // src/components/ControlledTable/index.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_radix_ui8 = require("radix-ui");
 var import_lucide_react8 = require("lucide-react");
 
 // src/components/ControlledTable/toolbar/index.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_lucide_react7 = require("lucide-react");
 
 // src/components/ControlledTable/SimpleSearch.tsx
+var import_react8 = require("react");
 var import_lucide_react6 = require("lucide-react");
+
+// src/components/ControlledTable/useDebounce.ts
+var import_react7 = require("react");
+function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = (0, import_react7.useState)(value);
+  (0, import_react7.useEffect)(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+  return debouncedValue;
+}
+var useDebounce_default = useDebounce;
+
+// src/components/ControlledTable/SimpleSearch.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var SimpleSearch = ({
   searchValue,
   onSearchCallback,
   placeholder = "Search..."
 }) => {
-  const handleChange = (e) => {
-    onSearchCallback?.(e.target.value);
-  };
+  const [localValue, setLocalValue] = (0, import_react8.useState)(searchValue);
+  const debouncedValue = useDebounce_default(localValue, 400);
+  const isFirstRender = (0, import_react8.useRef)(true);
+  (0, import_react8.useEffect)(() => {
+    setLocalValue(searchValue);
+  }, [searchValue]);
+  (0, import_react8.useEffect)(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    onSearchCallback?.(debouncedValue);
+  }, [debouncedValue]);
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "relative", children: [
     /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       import_lucide_react6.SearchIcon,
@@ -6718,8 +6745,8 @@ var SimpleSearch = ({
     /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       Input,
       {
-        value: searchValue,
-        onChange: handleChange,
+        value: localValue,
+        onChange: (e) => setLocalValue(e.target.value),
         placeholder,
         className: "pl-9"
       }
@@ -6729,23 +6756,7 @@ var SimpleSearch = ({
 var SimpleSearch_default = SimpleSearch;
 
 // src/components/ControlledTable/tableFilter/filterItem/filterSelect/index.tsx
-var import_react8 = __toESM(require("react"), 1);
-
-// src/components/ControlledTable/useDebounce.ts
-var import_react7 = require("react");
-function useDebounce(value, delay) {
-  const [debouncedValue, setDebouncedValue] = (0, import_react7.useState)(value);
-  (0, import_react7.useEffect)(() => {
-    const timer = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
-    return () => clearTimeout(timer);
-  }, [value, delay]);
-  return debouncedValue;
-}
-var useDebounce_default = useDebounce;
-
-// src/components/ControlledTable/tableFilter/filterItem/filterSelect/index.tsx
+var import_react9 = __toESM(require("react"), 1);
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var CustomFilterSelect = ({
   field,
@@ -6753,26 +6764,26 @@ var CustomFilterSelect = ({
   searchValue,
   className
 }) => {
-  const [searchTerm, setSearchTerm] = import_react8.default.useState(searchValue);
+  const [searchTerm, setSearchTerm] = import_react9.default.useState(searchValue);
   const debouncedValue = useDebounce_default(
     typeof searchTerm === "object" ? searchTerm : { [field?.id]: searchTerm },
     1e3
   );
-  const [modifiedOptions, setModifiedOptions] = (0, import_react8.useState)([]);
-  (0, import_react8.useEffect)(() => {
+  const [modifiedOptions, setModifiedOptions] = (0, import_react9.useState)([]);
+  (0, import_react9.useEffect)(() => {
     setSearchTerm({ [field.id]: searchValue });
   }, [field, searchValue]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (onFilterCallback) {
       onFilterCallback(debouncedValue);
     }
   }, [debouncedValue]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (typeof field.options === "function") {
-      const newParams = {};
-      field.options(newParams).then((res) => {
-        setModifiedOptions(field.adapterCallback(res.data.data));
-      });
+      field.options({}).then((res) => {
+        const raw = res?.data?.data ?? res?.data ?? res;
+        setModifiedOptions(field.adapterCallback(raw));
+      }).catch(() => setModifiedOptions([]));
     } else {
       setModifiedOptions(field.options);
     }
@@ -6781,7 +6792,7 @@ var CustomFilterSelect = ({
     const actualValue = value === "__none__" ? "" : value;
     setSearchTerm({ [field.id]: actualValue });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: `min-w-[200px] ${className ?? ""}`, children: [
+  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)(
       Select2,
@@ -6796,7 +6807,7 @@ var CustomFilterSelect = ({
               SelectItem2,
               {
                 value: String(opt.id ?? opt.value),
-                children: opt.title
+                children: opt.title ?? opt.label
               },
               String(opt.id ?? opt.value)
             ))
@@ -6880,7 +6891,7 @@ var CommonToolbar = ({
   onSearchCallback,
   onFilterCallback
 }) => {
-  const [isFilterOpen, setIsFilterOpen] = (0, import_react9.useState)(false);
+  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: [
@@ -7082,10 +7093,11 @@ var ControlledTable = ({
   getDataOnChange
 }) => {
   const { fields, filterFields, rowsPerPageOptions } = tableConfig;
-  const { data: tableData, count: count3 } = tableSource;
+  const { data: tableData, count: count3, total } = tableSource;
+  const totalCount = count3 ?? total ?? 0;
   const { limit = 10, offset: offset4 = 0 } = filteredParams ?? {};
   const sortObj = filteredParams?.sort;
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!filteredParams?.limit) {
       const next = { ...filteredParams, limit: 10, offset: 0 };
       setFilteredParams(next);
@@ -7342,13 +7354,13 @@ var ControlledTable = ({
         }) })
       ] }) })
     ] }),
-    withPagination && count3 > 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_runtime40.jsx)("div", { className: "border-t border-card-hover bg-card px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       ControlledPagination_default,
       {
         currentPage,
         rowsPerPage: Number(limit),
         rowsPerPageOptions: rowsPerPageOptions ?? [10, 25, 50],
-        totalCount: count3,
+        totalCount,
         onPageChange: handlePageChange,
         onRowsPerPageChange: handleRowsPerPageChange
       }

package/dist/index.d.cts

@@ -307,7 +307,8 @@ interface ToolbarActionsProps {
 interface CommonTableProps {
     tableSource: {
         data: any[];
-        count: number;
+        count?: number;
+        total?: number;
     };
     tableConfig: TableConfig;
     title?: string;

package/dist/index.d.ts

@@ -307,7 +307,8 @@ interface ToolbarActionsProps {
 interface CommonTableProps {
     tableSource: {
         data: any[];
-        count: number;
+        count?: number;
+        total?: number;
     };
     tableConfig: TableConfig;
     title?: string;

package/dist/index.js

@@ -6567,7 +6567,7 @@ function Text({ size: size4 = "md", className, ...props }) {
 }
 
 // src/components/ControlledTable/index.tsx
-import { useEffect as useEffect16 } from "react";
+import { useEffect as useEffect17 } from "react";
 import { Checkbox as Checkbox2 } from "radix-ui";
 import {
   Check as Check4,
@@ -6584,7 +6584,7 @@ import {
 } from "lucide-react";
 
 // src/components/ControlledTable/toolbar/index.tsx
-import { useState as useState15 } from "react";
+import { useState as useState16 } from "react";
 import {
   Trash2,
   Edit,
@@ -6599,16 +6599,43 @@ import {
 } from "lucide-react";
 
 // src/components/ControlledTable/SimpleSearch.tsx
+import { useState as useState14, useEffect as useEffect15, useRef as useRef12 } from "react";
 import { SearchIcon } from "lucide-react";
+
+// src/components/ControlledTable/useDebounce.ts
+import { useState as useState13, useEffect as useEffect14 } from "react";
+function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = useState13(value);
+  useEffect14(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+  return debouncedValue;
+}
+var useDebounce_default = useDebounce;
+
+// src/components/ControlledTable/SimpleSearch.tsx
 import { jsx as jsx34, jsxs as jsxs9 } from "react/jsx-runtime";
 var SimpleSearch = ({
   searchValue,
   onSearchCallback,
   placeholder = "Search..."
 }) => {
-  const handleChange = (e) => {
-    onSearchCallback?.(e.target.value);
-  };
+  const [localValue, setLocalValue] = useState14(searchValue);
+  const debouncedValue = useDebounce_default(localValue, 400);
+  const isFirstRender = useRef12(true);
+  useEffect15(() => {
+    setLocalValue(searchValue);
+  }, [searchValue]);
+  useEffect15(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    onSearchCallback?.(debouncedValue);
+  }, [debouncedValue]);
   return /* @__PURE__ */ jsxs9("div", { className: "relative", children: [
     /* @__PURE__ */ jsx34(
       SearchIcon,
@@ -6620,8 +6647,8 @@ var SimpleSearch = ({
     /* @__PURE__ */ jsx34(
       Input,
       {
-        value: searchValue,
-        onChange: handleChange,
+        value: localValue,
+        onChange: (e) => setLocalValue(e.target.value),
         placeholder,
         className: "pl-9"
       }
@@ -6631,23 +6658,7 @@ var SimpleSearch = ({
 var SimpleSearch_default = SimpleSearch;
 
 // src/components/ControlledTable/tableFilter/filterItem/filterSelect/index.tsx
-import React41, { useEffect as useEffect15, useState as useState14 } from "react";
-
-// src/components/ControlledTable/useDebounce.ts
-import { useState as useState13, useEffect as useEffect14 } from "react";
-function useDebounce(value, delay) {
-  const [debouncedValue, setDebouncedValue] = useState13(value);
-  useEffect14(() => {
-    const timer = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
-    return () => clearTimeout(timer);
-  }, [value, delay]);
-  return debouncedValue;
-}
-var useDebounce_default = useDebounce;
-
-// src/components/ControlledTable/tableFilter/filterItem/filterSelect/index.tsx
+import React42, { useEffect as useEffect16, useState as useState15 } from "react";
 import { jsx as jsx35, jsxs as jsxs10 } from "react/jsx-runtime";
 var CustomFilterSelect = ({
   field,
@@ -6655,26 +6666,26 @@ var CustomFilterSelect = ({
   searchValue,
   className
 }) => {
-  const [searchTerm, setSearchTerm] = React41.useState(searchValue);
+  const [searchTerm, setSearchTerm] = React42.useState(searchValue);
   const debouncedValue = useDebounce_default(
     typeof searchTerm === "object" ? searchTerm : { [field?.id]: searchTerm },
     1e3
   );
-  const [modifiedOptions, setModifiedOptions] = useState14([]);
-  useEffect15(() => {
+  const [modifiedOptions, setModifiedOptions] = useState15([]);
+  useEffect16(() => {
     setSearchTerm({ [field.id]: searchValue });
   }, [field, searchValue]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (onFilterCallback) {
       onFilterCallback(debouncedValue);
     }
   }, [debouncedValue]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (typeof field.options === "function") {
-      const newParams = {};
-      field.options(newParams).then((res) => {
-        setModifiedOptions(field.adapterCallback(res.data.data));
-      });
+      field.options({}).then((res) => {
+        const raw = res?.data?.data ?? res?.data ?? res;
+        setModifiedOptions(field.adapterCallback(raw));
+      }).catch(() => setModifiedOptions([]));
     } else {
       setModifiedOptions(field.options);
     }
@@ -6683,7 +6694,7 @@ var CustomFilterSelect = ({
     const actualValue = value === "__none__" ? "" : value;
     setSearchTerm({ [field.id]: actualValue });
   };
-  return /* @__PURE__ */ jsxs10("div", { className: `min-w-[200px] ${className ?? ""}`, children: [
+  return /* @__PURE__ */ jsxs10("div", { className: `min-w-50 ${className ?? ""}`, children: [
     field.label && /* @__PURE__ */ jsx35("p", { className: "mb-1.5 text-sm text-neutral-600", children: field.label }),
     /* @__PURE__ */ jsxs10(
       Select2,
@@ -6698,7 +6709,7 @@ var CustomFilterSelect = ({
               SelectItem2,
               {
                 value: String(opt.id ?? opt.value),
-                children: opt.title
+                children: opt.title ?? opt.label
               },
               String(opt.id ?? opt.value)
             ))
@@ -6782,7 +6793,7 @@ var CommonToolbar = ({
   onSearchCallback,
   onFilterCallback
 }) => {
-  const [isFilterOpen, setIsFilterOpen] = useState15(false);
+  const [isFilterOpen, setIsFilterOpen] = useState16(false);
   return /* @__PURE__ */ jsxs11("div", { children: [
     title && /* @__PURE__ */ jsx38("p", { className: "px-4 pt-3 text-base font-semibold uppercase tracking-wide text-content", children: title }),
     /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between gap-4 border-b border-card-hover bg-card px-4 py-2", children: [
@@ -6984,10 +6995,11 @@ var ControlledTable = ({
   getDataOnChange
 }) => {
   const { fields, filterFields, rowsPerPageOptions } = tableConfig;
-  const { data: tableData, count: count3 } = tableSource;
+  const { data: tableData, count: count3, total } = tableSource;
+  const totalCount = count3 ?? total ?? 0;
   const { limit = 10, offset: offset4 = 0 } = filteredParams ?? {};
   const sortObj = filteredParams?.sort;
-  useEffect16(() => {
+  useEffect17(() => {
     if (!filteredParams?.limit) {
       const next = { ...filteredParams, limit: 10, offset: 0 };
       setFilteredParams(next);
@@ -7244,13 +7256,13 @@ var ControlledTable = ({
         }) })
       ] }) })
     ] }),
-    withPagination && count3 > 0 && /* @__PURE__ */ jsx40("div", { className: "border-t border-card-hover bg-card px-4 py-2", children: /* @__PURE__ */ jsx40(
+    withPagination && totalCount > 0 && /* @__PURE__ */ jsx40("div", { className: "border-t border-card-hover bg-card px-4 py-2", children: /* @__PURE__ */ jsx40(
       ControlledPagination_default,
       {
         currentPage,
         rowsPerPage: Number(limit),
         rowsPerPageOptions: rowsPerPageOptions ?? [10, 25, 50],
-        totalCount: count3,
+        totalCount,
         onPageChange: handlePageChange,
         onRowsPerPageChange: handleRowsPerPageChange
       }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "auxalia-ui-kit",
-  "version": "1.6.9",
-  "description": "feat: Add new 'surface' color variant with default, outline, ghost, and link styles to the Button component.",
+  "version": "1.7.0",
+  "description": "Auxalia UI Kit is a React component library built on top of Radix UI and Tailwind CSS, designed to provide a comprehensive set of accessible and customizable UI components for building modern web applications.",
   "license": "ISC",
   "author": {
     "name": "auxalia-GmbH",