@sustaina/shared-ui 1.1.5

package/README.md

@@ -0,0 +1,107 @@
+# Sustaina - Shared UI
+
+# 📦 Installation
+
+To use `@sustaina/shared-ui` in your project, follow these steps carefully.
+
+---
+
+## Install UI package and required dependencies
+
+Make sure you've installed [TailwindCSS](https://tailwindcss.com/docs/installation) and [shadcn/ui](https://ui.shadcn.com/docs/installation/manual) before installing our library. **Don’t skip this.**
+
+```bash
+npm install @sustaina/shared-ui
+```
+
+---
+
+### Peer Dependencies
+
+You must manually install these peer dependencies in your host project:
+
+```bash
+npm install react react-dom react-hook-form
+```
+
+Supported versions:
+
+```json
+{
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-hook-form": "^7.61.1"
+  }
+}
+```
+
+> ⚠️ If your project doesn't match the version ranges above, you may get runtime or type errors.
+
+---
+
+## 3. Add `@sustaina/shared-ui` to your CSS
+
+To make styling work with our components, add this to your `index.css` or root CSS file:
+
+```css
+@import "@sustaina/shared-ui/styles.css"; /* this include styles/theme.css already */
+@source "../../node_modules/@sustaina/shared-ui/dist"; /* depend your root CSS file locate. */
+```
+
+---
+
+# Usage
+
+Import `@sustaina/shared-ui` components within your React component files:
+
+```tsx
+import { Button } from "@sustaina/shared-ui";
+
+export default function MyComponent() {
+  return <Button color="primary">Click me!</Button>;
+}
+```
+
+---
+
+# Developer Notes
+
+## CSS and Custom Styling
+
+- **Prefer Tailwind classes inline** whenever possible.
+  - If additional CSS is needed, include it in your components.
+  - **Important:** After running `npm run build`, always check `dist/index.css` to ensure your custom styles are included in the final build.
+
+- **Use `styles/theme.css` for global customizations**:
+  - Store custom shorthand colors, CSS variables, or utility classes here.
+  - <span style="color:red; font-weight:bold; text-decoration:underline; font-style:italic;">These styles will be available to consumers when they import the library `Go check step 3`.</span>
+  - Example:
+    ```css
+    @theme {
+      --color-sus-primary-1: #000;
+    }
+    ```
+  - **Reference:** [Tailwind Theme Variable Namespaces](https://tailwindcss.com/docs/theme#theme-variable-namespaces)
+
+## Including External Files in the Build
+
+- **Add your files to `copy-files-to-dist.js`**:
+  - This script handles copying files into the `dist` folder during the build process.
+  - Example entry:
+    ```js
+    const filesToCopy = [
+      {
+        from: "./src/styles/theme.css",
+        to: "./dist/index.css",
+        mode: "prepend" // "replace" | "append" | "prepend"
+      }
+    ];
+    ```
+
+- **How `mode` works:**
+  - `"replace"` → overwrite the destination file completely.
+  - `"append"` → add content at the end of the destination file.
+  - `"prepend"` → add content at the beginning of the destination file.
+- This script handles copying files into the `dist` folder during the build process.
+- **Note:** This will happen automatically when you run `npm run build`.

package/dist/index.css

@@ -0,0 +1,64 @@
+@theme {
+  /* core colors */
+  --color-sus-primary-1: rgba(65, 135, 92, 1);
+  --color-sus-primary-2: #77ab8a;
+  --color-sus-primary-3: #dfeae3;
+  --color-sus-secondary-1: rgba(164, 144, 83, 1);
+  --color-sus-secondary-2: #ab9555;
+  --color-sus-black: rgba(0, 0, 0, 1);
+  --color-sus-gray: #808080;
+  --color-sus-lightgray: rgba(0, 0, 0, 0.2);
+  --color-sus-offwhite: rgba(248, 250, 252, 1);
+  --color-sus-info: rgba(46, 112, 226, 1);
+  --color-sus-error: rgba(195, 42, 44, 1);
+  --color-sus-warning: rgba(255, 193, 7, 1);
+  --color-sus-success: rgba(55, 154, 42, 1);
+  /* uxui designer don't put this color to core colors?  */
+  --color-sus-green-1: #127035;
+  --color-sus-green-2: #379a2a;
+  --color-sus-gray-1: #afb4c3;
+  --color-sus-gray-2: #f7f4f4;
+  --color-sus-gray-3: #eaeaea;
+  --color-sus-gray-4: #f7fcf9;
+  --color-sus-gray-5: #41875c;
+  --color-sus-primary-1-hover: rgba(50, 100, 70, 1);
+  --color-sus-primary-2-hover: #8db89c;
+  --color-sus-primary-3-hover: #eff5f1;
+  --color-sus-primary-1-active: #dfeae3;
+  --color-sus-secondary-hover: #907b46;
+}
+
+/* src/components/advanceSearch/styles/index.css */
+.clear-button {
+  width: 15px;
+  height: 15px;
+  font-weight: bold;
+  border-radius: 50%;
+  background-color: black;
+  color: white;
+  border: 1px solid black;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.15s ease;
+  padding: 0;
+  cursor: pointer;
+}
+.clear-button:hover {
+  background-color: #333;
+}
+.clear-button .icon {
+  width: 13px;
+  height: 13px;
+}
+.circle-btn {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  aspect-ratio: 1/1;
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/advanceSearch/styles/index.css"],"sourcesContent":[".clear-button {\n  width: 15px;\n  height: 15px;\n  font-weight: bold;\n  border-radius: 50%;\n  background-color: black;\n  color: white;\n  border: 1px solid black;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background-color 0.15s ease;\n  padding: 0;\n  cursor: pointer;\n}\n\n.clear-button:hover {\n  background-color: #333; /* เข้มขึ้นเวลา hover */\n}\n\n.clear-button .icon {\n  width: 13px;\n  height: 13px;\n}\n\n.circle-btn {\n  width: 24px; /* small size */\n  height: 24px; /* same as width */\n  border-radius: 50%; /* perfect circle */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0; /* remove default button padding */\n  aspect-ratio: 1/1; /* force square, prevents oval */\n}\n"],"mappings":";AAAA,CAAC;AACC,SAAO;AACP,UAAQ;AACR,eAAa;AACb,iBAAe;AACf,oBAAkB;AAClB,SAAO;AACP,UAAQ,IAAI,MAAM;AAClB,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,cAAY,iBAAiB,MAAM;AACnC,WAAS;AACT,UAAQ;AACV;AAEA,CAhBC,YAgBY;AACX,oBAAkB;AACpB;AAEA,CApBC,aAoBa,CAAC;AACb,SAAO;AACP,UAAQ;AACV;AAEA,CAAC;AACC,SAAO;AACP,UAAQ;AACR,iBAAe;AACf,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,WAAS;AACT,gBAAc,CAAC,CAAC;AAClB;","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,457 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
+import React__default, { CSSProperties, ReactNode } from 'react';
+import { FieldValues, FieldPath, ControllerProps, UseFormGetFieldState } from 'react-hook-form';
+import { Header, RowData as RowData$1, Column as Column$1, Table as Table$1, ColumnDef, ColumnFiltersState, OnChangeFn, FilterFnOption, SortingState, ColumnOrderState, VisibilityState, ColumnPinningState, GroupingState, GroupingOptions, ColumnResizeMode, RowSelectionState, Row, ExpandedState, HeaderGroup, Cell, HeaderContext } from '@tanstack/react-table';
+import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
+import { VariantProps } from 'class-variance-authority';
+import { ClassValue } from 'clsx';
+import * as zustand from 'zustand';
+
+type FormErrorMessageProps = React__default.ComponentProps<"p"> & {
+    errorClassName?: string;
+};
+declare function FormErrorMessage({ className, errorClassName, ...props }: FormErrorMessageProps): react_jsx_runtime.JSX.Element | null;
+
+type FormFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = ControllerProps<TFieldValues, TName>;
+type FormFieldContextValue<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
+    name: TName;
+};
+declare const FormFieldContext: React$1.Context<FormFieldContextValue<FieldValues, string>>;
+declare function FormField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(props: FormFieldProps<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
+
+type FormItemProps = React__default.ComponentProps<"div">;
+type FormItemContextValue = {
+    id: string;
+};
+declare const FormItemContext: React__default.Context<FormItemContextValue>;
+declare function FormItem({ children, ...props }: FormItemProps): react_jsx_runtime.JSX.Element;
+
+type FormLabelProps = React__default.ComponentProps<"label"> & {
+    errorClassName?: string;
+    required?: boolean;
+};
+declare function FormLabel({ children, className, errorClassName, required, ...props }: FormLabelProps): react_jsx_runtime.JSX.Element;
+
+type UseFormFieldOptions = {
+    skipValidationIfNoContext?: boolean;
+};
+type UseFormFieldReturn = ReturnType<UseFormGetFieldState<any>> & {
+    prefixId: string | undefined;
+    name: string | undefined;
+    formItemId: string | undefined;
+    formLabelId: string | undefined;
+    formErrorMessageId: string | undefined;
+};
+declare function useFormField(options?: UseFormFieldOptions): UseFormFieldReturn;
+
+type TextInputProps = React__default.ComponentProps<"input">;
+declare function TextInput({ className, ...props }: TextInputProps): react_jsx_runtime.JSX.Element;
+
+type NumberInputProps = React__default.ComponentProps<"input">;
+declare function NumberInput({ className, ...props }: NumberInputProps): react_jsx_runtime.JSX.Element;
+
+declare function TableContainer({ className, children, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function Table({ className, ...props }: React$1.ComponentProps<"table">): react_jsx_runtime.JSX.Element;
+declare function TableHeader({ className, ...props }: React$1.ComponentProps<"thead">): react_jsx_runtime.JSX.Element;
+declare function TableBody({ className, ...props }: React$1.ComponentProps<"tbody">): react_jsx_runtime.JSX.Element;
+declare function TableRow({ className, ...props }: React$1.ComponentProps<"tr">): react_jsx_runtime.JSX.Element;
+
+type ColumnResizerProps = {
+    header: Header<any, any>;
+    className?: string;
+    style?: CSSProperties;
+};
+
+type DataTableColumnFilterProps<TData extends RowData$1> = {
+    column: Column$1<TData>;
+    table: Table$1<TData>;
+};
+type DataTableFilterConfig = {
+    enabled: boolean;
+    manual?: boolean;
+    maxDepth?: number;
+    filterFromLeafRows?: boolean;
+};
+type DataTableColumnFilter = {
+    enabled?: boolean;
+    initialState?: ColumnFiltersState;
+    state?: ColumnFiltersState;
+    onFilterChange?: OnChangeFn<ColumnFiltersState>;
+};
+type DataTableGlobalFilter<TData extends RowData$1> = {
+    enabled?: boolean;
+    initialState?: any;
+    state?: any;
+    filterFn?: FilterFnOption<TData>;
+    onFilterChange?: OnChangeFn<any>;
+    canColumnFilterable?: (column: Column$1<TData, unknown>) => boolean;
+};
+type DataTableFilters<TData extends RowData$1> = DataTableFilterConfig & {
+    column?: DataTableColumnFilter;
+    global?: DataTableGlobalFilter<TData>;
+};
+type DataTableColumnSorting = {
+    enabled: boolean;
+    manual?: boolean;
+    initialState?: SortingState;
+    state?: SortingState;
+    sortDescFirst?: boolean;
+    onSortingChange?: OnChangeFn<SortingState>;
+};
+type DataTableRowSelection<TData> = {
+    enabled: boolean;
+    initialState?: RowSelectionState;
+    state?: RowSelectionState;
+    canRowSelectable?: boolean | ((row: Row<TData>) => boolean);
+    multiSelect?: boolean;
+    onSelectionChange?: OnChangeFn<RowSelectionState>;
+};
+type DataTableColumnPinning = {
+    enabled: boolean;
+    initialState?: ColumnPinningState;
+    state?: ColumnPinningState;
+    onPinningChange?: OnChangeFn<ColumnPinningState>;
+};
+type DataTableColumnOrdering = {
+    enabled: boolean;
+    initialState?: string[];
+    state?: string[];
+    onOrderChange?: OnChangeFn<ColumnOrderState>;
+};
+type DataTableColumnVisibility = {
+    enabled: boolean;
+    initialState?: VisibilityState;
+    state?: VisibilityState;
+    onVisibilityChange?: OnChangeFn<VisibilityState>;
+};
+type DataTableRowExpansion<TData extends RowData$1> = {
+    enabled: boolean;
+    manual?: boolean;
+    initialState?: ExpandedState;
+    state?: ExpandedState;
+    onExpandedChange?: OnChangeFn<ExpandedState>;
+    isRowExpanded?: (row: Row<TData>) => boolean;
+    canRowExpand?: (row: Row<TData>) => boolean;
+};
+type DataTableColumnGrouping = {
+    manual?: boolean;
+    enabled: boolean;
+    groupedMode?: false | "reorder" | "remove";
+    initialState?: GroupingState;
+    state?: GroupingState;
+    customAggregationFns?: GroupingOptions["aggregationFns"];
+    onGroupingChange?: OnChangeFn<GroupingState>;
+};
+type DataTableRowClickHandler<TData extends RowData$1> = (rowData: TData, info: {
+    event: React.MouseEvent<HTMLTableRowElement>;
+    row: Row<TData>;
+    table: Table$1<TData>;
+}) => void;
+type DataTableRowIdKeyHandler<TData extends RowData$1> = (originalRow: TData, index: number, parent?: Row<TData>) => string;
+type DataTableHeaderCell<TData extends RowData$1> = {
+    id: string;
+    columnId: string;
+    content: React.ReactNode;
+    originalCell: Header<TData, unknown>;
+};
+type DataTableRenderHeaderProps<TData extends RowData$1> = {
+    headerGroup: HeaderGroup<TData>;
+    table: Table$1<TData>;
+    cells: DataTableHeaderCell<TData>[];
+};
+type DataTableRenderHeaderHandler<TData extends RowData$1> = (props: DataTableRenderHeaderProps<TData>) => React.ReactNode;
+type DataTableRowCell<TData extends RowData$1> = {
+    id: string;
+    columnId: string;
+    content: React.ReactNode;
+    originalCell: Cell<TData, unknown>;
+};
+type DataTableRenderRowProps<TData extends RowData$1> = {
+    row: Row<TData>;
+    cells: DataTableRowCell<TData>[];
+    table: Table$1<TData>;
+};
+type DataTableRenderRowHandler<TData extends RowData$1> = (props: DataTableRenderRowProps<TData>) => React.ReactNode;
+type DataTableChildrenKeyHandler<TData> = (originalRow: TData, index: number) => TData[] | undefined;
+type DatatableColumnResizing = {
+    enabled: boolean;
+    resizeMode?: ColumnResizeMode;
+};
+type DataTableComponentProps<TData> = {
+    containerProps?: React.ComponentProps<typeof TableContainer>;
+    tableProps?: React.ComponentProps<typeof Table>;
+    tableHeaderProps?: React.ComponentProps<typeof TableHeader>;
+    tableBodyProps?: React.ComponentProps<typeof TableBody>;
+    tableDataRowProps?: React.ComponentProps<typeof TableRow> | ((info: {
+        row: Row<TData>;
+        table: Table$1<TData>;
+    }) => React.ComponentProps<typeof TableRow>);
+    columnResizerProps?: Omit<ColumnResizerProps, "header">;
+};
+type ContentSlot = {
+    content: React.ReactNode;
+    wrapperProps?: React.ComponentProps<"div">;
+};
+type DataTableStatusContent = {
+    initialLoading?: ContentSlot;
+    fetchingMore?: ContentSlot;
+    noMoreData?: ContentSlot;
+    emptyData?: ContentSlot;
+    emptyFilteredData?: ContentSlot;
+};
+type DataTableScrollFetch = {
+    enabled: boolean;
+    fetchMore?: () => void;
+    hasMore?: boolean;
+    isFetchingMore?: boolean;
+};
+type DataTableProps<TData extends RowData$1> = {
+    data: TData[];
+    columns: ColumnDef<TData, any>[];
+    filters?: DataTableFilters<TData>;
+    sorting?: DataTableColumnSorting;
+    columnOrder?: DataTableColumnOrdering;
+    columnVisibility?: DataTableColumnVisibility;
+    columnPinning?: DataTableColumnPinning;
+    columnGrouping?: DataTableColumnGrouping;
+    columnResizing?: DatatableColumnResizing;
+    rowSelection?: DataTableRowSelection<TData>;
+    rowExpansion?: DataTableRowExpansion<TData>;
+    scrollFetch?: DataTableScrollFetch;
+    components?: DataTableComponentProps<TData>;
+    statusContent?: DataTableStatusContent;
+    tableRef?: React.RefObject<Table$1<TData> | null>;
+    isInitialLoading?: boolean;
+    debug?: boolean;
+    rowIdKey?: DataTableRowIdKeyHandler<TData>;
+    childrenKey?: DataTableChildrenKeyHandler<TData>;
+    onRowClick?: DataTableRowClickHandler<TData>;
+};
+declare const DataTable: <TData extends RowData$1>({ tableRef, isInitialLoading, columns, data, filters, sorting, columnOrder, columnVisibility, columnPinning, columnGrouping, columnResizing, rowSelection, rowExpansion, scrollFetch, statusContent, rowIdKey, childrenKey, onRowClick, debug, components }: DataTableProps<TData>) => react_jsx_runtime.JSX.Element;
+
+declare module "@tanstack/react-table" {
+  interface ColumnMeta<TData extends RowData> {
+    headerProps?: React.ComponentProps<"th">;
+    cellProps?: React.ComponentProps<"td">;
+    useColumnSizing?: boolean;
+    renderColumnFilter?: (props: DataTableColumnFilterProps<TData>) => ReactNode;
+  }
+}
+
+declare function compareAlphanumeric(aStr: string, bStr: string): number;
+
+declare function booleanToSelectValue(value: boolean | undefined, options?: {
+    fallbackUndefinedValue?: string;
+}): string;
+declare function selectValueToBoolean(value: string): boolean | undefined;
+declare function renderContentSlot(slot: ContentSlot, defaultWrapperProps?: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element | null;
+
+type SorterProps = {
+    show?: boolean;
+};
+type HeaderCellProps<TData = any, TValue = any> = {
+    label: React.ReactNode;
+    context: HeaderContext<TData, TValue>;
+    rootClassName?: string;
+    labelClassName?: string;
+    sorterProps?: SorterProps;
+};
+declare const HeaderCell: ({ rootClassName, labelClassName, context, label, sorterProps }: HeaderCellProps) => react_jsx_runtime.JSX.Element;
+
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "outline" | "cancel" | "destructive" | "secondary" | "ghost" | "defaultSelect" | "defaultOutline" | null | undefined;
+    size?: "default" | "option" | "icon" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-md" | "icon-lg" | null | undefined;
+    active?: boolean | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, active, asChild, ...props }: React$1.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+    active?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+type Column = {
+    id: string;
+};
+type GridPayload<TColumn extends {
+    id: string;
+} = Column> = {
+    ordering: TColumn["id"][];
+    visibility: Record<TColumn["id"], boolean>;
+    pinning: {
+        left: TColumn["id"][];
+    };
+};
+
+type GridSettingsModalProps = {
+    isOpen: boolean;
+    headerClassname?: string;
+    descriptionClassname?: string;
+    addButtonClassname?: string;
+    saveButtonClassname?: string;
+    availableColumns: Column[];
+    currentColumns: Column[];
+    limit?: number;
+    onClose: () => void;
+    onSaveColumns?: (payload: GridPayload) => void;
+};
+declare const GridSettingsModal: ({ isOpen, headerClassname, descriptionClassname, addButtonClassname, saveButtonClassname, availableColumns, currentColumns, limit, onClose, onSaveColumns }: GridSettingsModalProps) => react_jsx_runtime.JSX.Element;
+
+type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<T, Exclude<keyof T, Keys>> & {
+    [K in Keys]: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;
+}[Keys];
+type NavbarBaseProps = {
+    className?: string;
+    title?: React__default.ReactNode;
+    subTitle?: React__default.ReactNode;
+    headImageURL?: string;
+    headImageURLClassName?: string;
+    tooltipTitle?: string;
+    tooltipIcon?: React__default.ReactNode;
+    tooltipdescription?: React__default.ReactNode;
+    mainButtonText?: React__default.ReactNode;
+    mainButtonClassName?: string;
+    mainButtonDisable?: boolean;
+    subButtonText?: React__default.ReactNode;
+    subButtonClassName?: string;
+    subButtonDisable?: boolean;
+    onMainButtonClick?: () => void;
+    onSubButtonClick?: () => void;
+    searchButton?: React__default.ReactNode;
+};
+type NavbarProps = RequireAtLeastOne<NavbarBaseProps, "title" | "headImageURL">;
+declare const _default: React__default.MemoExoticComponent<({ className, title, subTitle, headImageURL, headImageURLClassName, tooltipTitle, tooltipIcon, tooltipdescription, mainButtonText, mainButtonClassName, mainButtonDisable, subButtonText, subButtonClassName, subButtonDisable, onMainButtonClick, onSubButtonClick, searchButton }: NavbarProps) => react_jsx_runtime.JSX.Element>;
+
+type FieldType = "text" | "number" | "date" | "datetime" | "checkbox" | "dropdown" | "lookup";
+type Option = {
+    value: string;
+    label: string;
+};
+interface FieldSchemaBase<T extends FieldType> {
+    name: string;
+    type: T;
+    label?: string;
+}
+interface DropdownFieldSchema extends FieldSchemaBase<"dropdown"> {
+    options: Option[];
+}
+type TextFieldSchema = FieldSchemaBase<"text">;
+type NumberFieldSchema = FieldSchemaBase<"number">;
+type DateFieldSchema = FieldSchemaBase<"date">;
+type DateTimeFieldSchema = FieldSchemaBase<"datetime">;
+type CheckboxFieldSchema = FieldSchemaBase<"checkbox">;
+type LookupFieldSchema = FieldSchemaBase<"lookup">;
+type FieldSchema = DropdownFieldSchema | TextFieldSchema | NumberFieldSchema | DateFieldSchema | DateTimeFieldSchema | CheckboxFieldSchema | LookupFieldSchema;
+interface AdvanceSearchProps {
+    fields: FieldSchema[];
+    portalId: string;
+    limitRows?: number;
+    iconColor?: string;
+    onSearch?: (param: Record<string, unknown>) => void;
+}
+
+declare const AdvanceSearch: React__default.FC<AdvanceSearchProps>;
+
+/**
+ * Utility function to intelligently combine class names using `clsx`
+ * and resolve Tailwind CSS class conflicts using `tailwind-merge`.
+ *
+ * This function is commonly used in React or other frontend frameworks
+ * to conditionally merge Tailwind classes and avoid class duplication or conflict,
+ * especially when combining utility variants like `bg-red-500` and `bg-blue-500`.
+ *
+ * @param {...ClassValue[]} args - A variadic list of class values. Each can be:
+ *  - string: e.g. `"px-4 py-2"`
+ *  - object: e.g. `{ 'text-red-500': isError }`
+ *  - array: e.g. `['bg-blue-500', conditionalClass]`
+ *  These will be normalized and merged by `clsx`, then conflict-resolved by `tailwind-merge`.
+ *
+ * @returns {string} A single string of valid Tailwind class names with conflicts resolved.
+ *
+ * @example
+ * ```tsx
+ * <button className={cn("px-4 py-2", isPrimary && "bg-blue-500", "bg-red-500")} />
+ * // Result: "px-4 py-2 bg-blue-500" (if isPrimary is true)
+ * ```
+ *
+ * @see https://github.com/lukeed/clsx - `clsx` docs for conditional class logic
+ * @see https://github.com/dcastil/tailwind-merge - `tailwind-merge` docs for conflict resolution
+ */
+declare function cn(...args: ClassValue[]): string;
+
+type TanstackTableInstance$1 = {
+    getAllColumns(): any[];
+};
+declare function getColumnIdFromTable<T extends TanstackTableInstance$1>(table: T): {
+    availableColumns: {
+        id: any;
+    }[];
+    currentColumns: {
+        id: any;
+    }[];
+};
+
+type TanstackTableInstance = {
+    getAllColumns(): any[];
+    getVisibleLeafColumns(): any[];
+};
+type UseGridSettingsStoreActions = {
+    setAvailableColumns: (cols: Column[]) => void;
+    setCurrentColumns: (cols: Column[]) => void;
+    setPayload: (payload: GridPayload) => void;
+    reset: () => void;
+    extractColumns: (table: TanstackTableInstance) => {
+        availableColumns: Column[];
+        currentColumns: Column[];
+    };
+};
+type UseGridSettingsStoreState = {
+    availableColumns: Column[];
+    currentColumns: Column[];
+    payload: GridPayload;
+};
+declare const useGridSettingsStore: zustand.UseBoundStore<zustand.StoreApi<UseGridSettingsStoreState & UseGridSettingsStoreActions>>;
+
+type UseHoverResult = {
+    ref: React__default.RefCallback<HTMLElement>;
+    hovering: boolean;
+};
+declare const useHover: () => UseHoverResult;
+
+type UseIntersectionObserverOptions = {
+    root?: Element | Document | null;
+    rootMargin?: string;
+    threshold?: number | number[];
+    freezeOnceVisible?: boolean;
+    onChange?: (isIntersecting: boolean, entry: IntersectionObserverEntry) => void;
+    initialIsIntersecting?: boolean;
+};
+type IntersectionReturn = [
+    (node?: Element | null) => void,
+    boolean,
+    IntersectionObserverEntry | undefined
+] & {
+    ref: (node?: Element | null) => void;
+    isIntersecting: boolean;
+    entry?: IntersectionObserverEntry;
+};
+declare const useIntersectionObserver: ({ threshold, root, rootMargin, freezeOnceVisible, initialIsIntersecting, onChange }?: UseIntersectionObserverOptions) => IntersectionReturn;
+
+type UseMediaQueryOptions = {
+    query: string;
+};
+type UseMediaQueryResult = boolean;
+declare const useMediaQuery: ({ query }: UseMediaQueryOptions) => UseMediaQueryResult;
+
+type UseScreenSizeResult = {
+    isMobile: boolean;
+    isTablet: boolean;
+    isDesktop: boolean;
+};
+type Breakpoints = {
+    mobile?: string;
+    tablet?: string;
+    desktop?: string;
+};
+declare const useScreenSize: (breakpoints?: Breakpoints) => UseScreenSizeResult;
+
+export { AdvanceSearch, type Breakpoints, Button, type Column, type ContentSlot, DataTable, type DataTableChildrenKeyHandler, type DataTableColumnFilter, type DataTableColumnFilterProps, type DataTableColumnGrouping, type DataTableColumnOrdering, type DataTableColumnPinning, type DataTableColumnSorting, type DataTableColumnVisibility, type DataTableComponentProps, type DataTableFilterConfig, type DataTableFilters, type DataTableGlobalFilter, type DataTableHeaderCell, type DataTableProps, type DataTableRenderHeaderHandler, type DataTableRenderHeaderProps, type DataTableRenderRowHandler, type DataTableRenderRowProps, type DataTableRowCell, type DataTableRowClickHandler, type DataTableRowExpansion, type DataTableRowIdKeyHandler, type DataTableRowSelection, type DataTableScrollFetch, type DataTableStatusContent, type DatatableColumnResizing, type FieldSchema, FormErrorMessage, type FormErrorMessageProps, FormField, FormFieldContext, type FormFieldContextValue, type FormFieldProps, FormItem, FormItemContext, type FormItemContextValue, type FormItemProps, FormLabel, type FormLabelProps, type GridPayload, GridSettingsModal, type GridSettingsModalProps, HeaderCell, type HeaderCellProps, _default as Navbar, type NavbarProps, NumberInput, type NumberInputProps, type SorterProps, TextInput, type TextInputProps, type UseFormFieldOptions, type UseFormFieldReturn, type UseHoverResult, type UseMediaQueryOptions, type UseMediaQueryResult, type UseScreenSizeResult, booleanToSelectValue, buttonVariants, cn, compareAlphanumeric, getColumnIdFromTable, renderContentSlot, selectValueToBoolean, useFormField, useGridSettingsStore, useHover, useIntersectionObserver, useMediaQuery, useScreenSize };