@segmentify/ui 0.0.21 → 0.0.23

package/dist/app.d.ts

@@ -1,2 +1,14 @@
+export type Product = {
+    id: number;
+    title: string;
+    description: string;
+    price: number;
+    discountPercentage: number;
+    rating: number;
+    stock: number;
+    brand: string;
+    category: string;
+    thumbnail: string;
+};
 declare function App(): import("react/jsx-runtime").JSX.Element;
 export default App;

package/dist/components/atoms/table.d.ts

@@ -1,17 +1,10 @@
 import * as React from 'react';
 declare function Table({ className, ...props }: React.ComponentProps<'table'>): import("react/jsx-runtime").JSX.Element;
-type TableHeaderProps = React.ComponentProps<'thead'> & {
-    disableHover?: boolean;
-};
-declare function TableHeader({ className, disableHover, ...props }: TableHeaderProps): import("react/jsx-runtime").JSX.Element;
-declare function TableHead({ className, ...props }: React.ComponentProps<'th'>): import("react/jsx-runtime").JSX.Element;
+declare function TableHeader({ className, ...props }: React.ComponentProps<'thead'>): import("react/jsx-runtime").JSX.Element;
 declare function TableBody({ className, ...props }: React.ComponentProps<'tbody'>): import("react/jsx-runtime").JSX.Element;
-declare function TableHeadRow({ className, ...props }: React.ComponentProps<'tr'>): import("react/jsx-runtime").JSX.Element;
-type TableRowProps = React.ComponentProps<'tr'> & {
-    disableHover?: boolean;
-};
-declare function TableRow({ className, disableHover, ...props }: TableRowProps): import("react/jsx-runtime").JSX.Element;
+declare function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>): import("react/jsx-runtime").JSX.Element;
+declare function TableRow({ className, ...props }: React.ComponentProps<'tr'>): import("react/jsx-runtime").JSX.Element;
+declare function TableHead({ className, ...props }: React.ComponentProps<'th'>): import("react/jsx-runtime").JSX.Element;
 declare function TableCell({ className, ...props }: React.ComponentProps<'td'>): import("react/jsx-runtime").JSX.Element;
 declare function TableCaption({ className, ...props }: React.ComponentProps<'caption'>): import("react/jsx-runtime").JSX.Element;
-declare function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>): import("react/jsx-runtime").JSX.Element;
-export { Table, TableHeader, TableBody, TableHeadRow, TableFooter, TableHead, TableRow, TableCell, TableCaption };
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

package/dist/components/molecules/base-button.d.ts

@@ -2,19 +2,14 @@ import React from 'react';
 import { buttonVariants } from '../../lib/design-variants';
 import { VariantProps } from 'class-variance-authority';
 import type { Union } from 'ts-toolbelt';
-type BaseProps = {
-    className?: string;
-    type?: 'button' | 'submit' | 'reset';
+type BaseProps = Omit<React.ComponentPropsWithoutRef<'button'>, 'children'> & {
     size?: VariantProps<typeof buttonVariants>['size'];
     variant?: VariantProps<typeof buttonVariants>['variant'];
     label?: string;
     suffix?: boolean;
     prefix?: boolean;
     isLoading?: boolean;
-    onClick?: () => void;
     labelClassName?: string;
-    disabled?: boolean;
-    form?: string;
 };
 type IconOnlyProps = BaseProps & {
     isIconOnly: true;
@@ -25,5 +20,5 @@ type DefaultButtonProps = BaseProps & {
     icon?: React.ReactNode;
 };
 type BaseButtonProps = Union.Strict<IconOnlyProps | DefaultButtonProps>;
-declare const BaseButton: ({ icon, type, label, size, variant, suffix, prefix, isLoading, onClick, className, labelClassName, disabled, isIconOnly, form, }: BaseButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const BaseButton: React.ForwardRefExoticComponent<BaseButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { BaseButton };

package/dist/components/molecules/combobox-field.d.ts

@@ -1,9 +1,14 @@
 import type { SelectItemProps } from '../../lib/types';
-import type { Union } from 'ts-toolbelt';
-type BaseProps = {
+type TriggerProps = {
+    trigger: React.ReactNode;
+    triggerPlaceholder?: never;
+} | {
+    trigger?: never;
+    triggerPlaceholder: string;
+};
+type Props = TriggerProps & {
     isDisabled?: boolean;
     options: SelectItemProps[];
-    triggerPlaceholder: string;
     isFormControlWrapper?: boolean;
     avoidCollisions?: boolean;
     contentClassName?: string;
@@ -12,21 +17,15 @@ type BaseProps = {
     containerClassName?: string;
     contentListClassName?: string;
     closeOnSelect?: boolean;
+    align?: 'start' | 'center' | 'end';
     label?: string;
-    onInputChange: (inputValue: string) => void;
-    handleSelectItem: (value: string | string[], option: SelectItemProps) => void;
-};
-type MultiSelectProps = BaseProps & {
-    isMultiSelect: true;
-    value: string[];
+    onInputChange?: (inputValue: string) => void;
+    clearable?: boolean;
+    multiple?: boolean;
+    value: string | string[];
+    onValueChange: (value: string | string[]) => void;
     hasAllOption?: boolean;
     allOptionLabel?: string;
-    handleSelectAll: (value: string | string[], availableOptions: SelectItemProps[]) => void;
-};
-type SingleSelectProps = BaseProps & {
-    isMultiSelect?: false;
-    value: string;
 };
-type Props = Union.Strict<MultiSelectProps | SingleSelectProps>;
-export declare const ComboboxField: ({ value, isDisabled, hasAllOption, isMultiSelect, options, allOptionLabel, triggerPlaceholder, isFormControlWrapper, avoidCollisions, contentClassName, inputPlaceholder, emptyMessage, containerClassName, contentListClassName, closeOnSelect, label, handleSelectItem, handleSelectAll, onInputChange, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const ComboboxField: ({ value, isDisabled, hasAllOption, multiple, options, allOptionLabel, triggerPlaceholder, trigger, isFormControlWrapper, avoidCollisions, align, contentClassName, inputPlaceholder, emptyMessage, containerClassName, contentListClassName, closeOnSelect, label, onValueChange, onInputChange, clearable, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/molecules/debounced-input.d.ts

@@ -1,11 +1,19 @@
-interface SearchInputProps {
-    name: string;
+import type { O } from 'ts-toolbelt';
+interface BaseSearchInputProps {
     value: string;
     onChange: (value: string) => void;
     placeholder: string;
     className?: string;
-    label?: string;
     inputClassName?: string;
 }
+type WithLabelProps = O.Merge<BaseSearchInputProps, {
+    label: string;
+    name: string;
+}>;
+type WithoutLabelProps = O.Merge<BaseSearchInputProps, {
+    label?: undefined;
+    name?: string;
+}>;
+type SearchInputProps = WithLabelProps | WithoutLabelProps;
 declare function DebouncedInput({ value, onChange, className, inputClassName, name, placeholder, label }: SearchInputProps): import("react/jsx-runtime").JSX.Element;
 export { DebouncedInput };

package/dist/components/organisms/data-table/column-visibility.d.ts

@@ -0,0 +1,7 @@
+interface ColumnVisibilityProps {
+    inputPlaceholder?: string;
+    emptyMessage?: string;
+    allOptionLabel?: string;
+}
+export declare function ColumnVisibility({ inputPlaceholder, emptyMessage, allOptionLabel, }: ColumnVisibilityProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/organisms/data-table/content.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+interface ContentProps {
+    className?: string;
+    loadingContent?: ReactNode;
+    emptyContent?: ReactNode;
+}
+export declare function Content({ className, loadingContent, emptyContent, }: ContentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/organisms/data-table/context.d.ts

@@ -0,0 +1,9 @@
+import { type Table as TanstackTable } from '@tanstack/react-table';
+export interface DataTableContextValue<TData> {
+    table: TanstackTable<TData>;
+    isLoading: boolean;
+    globalFilter: string;
+    onGlobalFilterChange: (value: string) => void;
+}
+export declare const DataTableContext: import("react").Context<DataTableContextValue<unknown> | null>;
+export declare function useDataTableContext<TData>(): DataTableContextValue<TData>;

package/dist/components/organisms/data-table/index.d.ts

@@ -0,0 +1,13 @@
+import { Root } from './root';
+import { Toolbar } from './toolbar';
+import { Search } from './search';
+import { ColumnVisibility } from './column-visibility';
+import { Content } from './content';
+export declare const DataTable: {
+    Root: typeof Root;
+    Toolbar: typeof Toolbar;
+    Search: typeof Search;
+    ColumnVisibility: typeof ColumnVisibility;
+    Content: typeof Content;
+    Pagination: ({ showSelectedCount, previousLabel, nextLabel, className, }: import("./pagination").PaginationProps) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/components/organisms/data-table/pagination.d.ts

@@ -0,0 +1,7 @@
+export interface PaginationProps {
+    showSelectedCount?: boolean;
+    previousLabel?: string;
+    nextLabel?: string;
+    className?: string;
+}
+export declare const Pagination: ({ showSelectedCount, previousLabel, nextLabel, className, }: PaginationProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/organisms/data-table/root.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { type Table as TanstackTable } from '@tanstack/react-table';
+interface RootProps<TData> {
+    table: TanstackTable<TData>;
+    children: ReactNode;
+    isLoading?: boolean;
+    globalFilter?: string;
+    onGlobalFilterChange?: (value: string) => void;
+    className?: string;
+}
+export declare function Root<TData>({ table, children, isLoading, globalFilter, onGlobalFilterChange, className, }: RootProps<TData>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/organisms/data-table/search.d.ts

@@ -0,0 +1,7 @@
+interface SearchProps {
+    placeholder?: string;
+    filterColumn?: string;
+    className?: string;
+}
+export declare function Search({ placeholder, filterColumn, className }: SearchProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/organisms/data-table/toolbar.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+interface ToolbarProps {
+    children: ReactNode;
+    className?: string;
+}
+export declare function Toolbar({ children, className }: ToolbarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/organisms/form-combobox.d.ts

@@ -1,26 +1,24 @@
-import { type Control, type FieldValues, type Path } from 'react-hook-form';
 import type { SelectItemProps } from '../../lib/types';
-type FormComboboxProps<TFieldValues extends FieldValues = FieldValues> = {
-    name: Path<TFieldValues>;
-    control?: Control<TFieldValues>;
+type Props = {
+    name: string;
     label: string;
     triggerPlaceholder: string;
     inputPlaceholder: string;
     options: SelectItemProps[];
     description?: string;
-    isMultiSelect?: boolean;
+    multiple?: boolean;
     emptyMessage: string;
     containerClassName?: string;
     contentClassName?: string;
     contentListClassName?: string;
     avoidCollisions?: boolean;
-    hasClearButton?: boolean;
+    clearable?: boolean;
     hasAllOption?: boolean;
     allOptionLabel?: string;
     closeOnSelect?: boolean;
-    onInputChange: (inputValue: string) => void;
+    onInputChange?: (inputValue: string) => void;
     isDisabled?: boolean;
     tooltipContent?: string;
 };
-export declare const FormCombobox: <TFieldValues extends FieldValues = FieldValues>({ name, control, label, triggerPlaceholder, inputPlaceholder, options, description, isMultiSelect, emptyMessage, containerClassName, contentClassName, contentListClassName, avoidCollisions, hasClearButton, hasAllOption, allOptionLabel, closeOnSelect, onInputChange, isDisabled, tooltipContent, }: FormComboboxProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+export declare const FormCombobox: ({ name, label, triggerPlaceholder, inputPlaceholder, options, description, multiple, emptyMessage, containerClassName, contentClassName, contentListClassName, avoidCollisions, clearable, hasAllOption, allOptionLabel, closeOnSelect, onInputChange, isDisabled, tooltipContent, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/organisms/form-file-upload.d.ts

@@ -1,8 +1,6 @@
-import { type Control, type FieldValues, type Path } from 'react-hook-form';
 import type { ClassValue } from 'clsx';
-type FormFileUploadProps<TFieldValues extends FieldValues = FieldValues> = {
-    name: Path<TFieldValues>;
-    control?: Control<TFieldValues>;
+type FormFileUploadProps = {
+    name: string;
     label?: string;
     uploadButtonLabel?: string;
     description?: string;
@@ -15,7 +13,7 @@ type FormFileUploadProps<TFieldValues extends FieldValues = FieldValues> = {
     onUpload?: (file: File) => Promise<string>;
 };
 export declare const FormFileUpload: {
-    <TFieldValues extends FieldValues = FieldValues>({ name, control, label, uploadButtonLabel, description, accept, disabled, multiple, containerClassName, tooltipContent, hasRequiredIndicator, onUpload, }: FormFileUploadProps<TFieldValues>): import("react/jsx-runtime").JSX.Element;
+    ({ name, label, uploadButtonLabel, description, accept, disabled, multiple, containerClassName, tooltipContent, hasRequiredIndicator, onUpload, }: FormFileUploadProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/components/organisms/form-password.d.ts

@@ -1,14 +1,12 @@
-import { type Control, type FieldValues, type Path } from 'react-hook-form';
 import type { ClassValue } from 'clsx';
-type Props<TFieldValues extends FieldValues = FieldValues> = {
+type Props = {
     label: string;
-    name: Path<TFieldValues>;
+    name: string;
     placeholder: string;
-    control?: Control<TFieldValues>;
     containerClassName?: ClassValue;
     description?: string;
     tooltipContent?: string;
     hasRequiredIndicator?: boolean;
 };
-export declare const FormPassword: <TFieldValues extends FieldValues = FieldValues>({ label, name, containerClassName, description, placeholder, tooltipContent, control, hasRequiredIndicator, ...props }: Props<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+export declare const FormPassword: ({ label, name, containerClassName, description, placeholder, tooltipContent, hasRequiredIndicator, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/organisms/form-radio.d.ts

@@ -1,15 +1,13 @@
-import { type Control, type FieldValues, type Path } from 'react-hook-form';
 import type { SelectItemProps } from '../../lib/types';
-type Props<TFieldValues extends FieldValues = FieldValues> = {
-    name: Path<TFieldValues>;
+type Props = {
+    name: string;
     label: string;
     items: SelectItemProps[];
-    control?: Control<TFieldValues>;
     containerClassName?: string;
     itemClassName?: string;
     itemLabelClassName?: string;
     selectedClassName?: string;
     description?: string;
 };
-export declare const FormRadio: <TFieldValues extends FieldValues = FieldValues>({ name, label, items, control, containerClassName, itemClassName, itemLabelClassName, selectedClassName, description, }: Props<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+export declare const FormRadio: ({ name, label, items, containerClassName, itemClassName, itemLabelClassName, selectedClassName, description, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/organisms/form-slider.d.ts

@@ -1,9 +1,7 @@
 import React from 'react';
-import { type Control, type FieldValues, type Path } from 'react-hook-form';
 import { Slider } from '../../components/atoms/slider';
-type FormSliderProps<TFieldValues extends FieldValues = FieldValues> = {
-    name: Path<TFieldValues>;
-    control?: Control<TFieldValues>;
+type FormSliderProps = {
+    name: string;
     label?: string;
     description?: string;
     min?: number;
@@ -12,12 +10,12 @@ type FormSliderProps<TFieldValues extends FieldValues = FieldValues> = {
     leftLabel?: string;
     rightLabel?: string;
     showLabels?: boolean;
-    complementaryField?: Path<TFieldValues>;
+    complementaryField?: string;
     onValueChange?: (value: number) => void;
     containerClassName?: string;
     labelClassName?: string;
     showErrorPlaceholder?: boolean;
     tooltipContent?: string;
-} & Omit<React.ComponentProps<typeof Slider>, 'name' | 'onValueChange'>;
-export declare const FormSlider: <TFieldValues extends FieldValues = FieldValues>({ name, control, label, description, min, max, step, leftLabel, rightLabel, showLabels, complementaryField, onValueChange, containerClassName, labelClassName, showErrorPlaceholder, tooltipContent, ...props }: FormSliderProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+} & React.ComponentProps<typeof Slider>;
+export declare const FormSlider: ({ name, label, description, min, max, step, leftLabel, rightLabel, showLabels, complementaryField, onValueChange, containerClassName, labelClassName, showErrorPlaceholder, tooltipContent, ...props }: FormSliderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/organisms/form-switch.d.ts

@@ -1,9 +1,7 @@
-import { type Control, type FieldValues, type Path } from 'react-hook-form';
-type Props<TFieldValues extends FieldValues = FieldValues> = {
-    name: Path<TFieldValues>;
+type Props = {
+    name: string;
     label: string;
-    control?: Control<TFieldValues>;
     description?: string;
 };
-export declare const FormSwitch: <TFieldValues extends FieldValues = FieldValues>({ name, label, description, control, ...props }: Props<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+export declare const FormSwitch: ({ name, label, description, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/organisms/form-textarea.d.ts

@@ -1,11 +1,9 @@
-import { type Control, type FieldValues, type Path } from 'react-hook-form';
-type Props<TFieldValues extends FieldValues = FieldValues> = {
+type Props = {
     label: string;
-    name: Path<TFieldValues>;
+    name: string;
     placeholder: string;
-    control?: Control<TFieldValues>;
     description?: string;
     containerClassName?: string;
 };
-export declare const FormTextarea: <TFieldValues extends FieldValues = FieldValues>({ label, name, description, placeholder, containerClassName, control, ...props }: Props<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+export declare const FormTextarea: ({ label, name, description, placeholder, containerClassName, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/hooks/use-data-table.d.ts

@@ -0,0 +1,133 @@
+import { type ColumnDef, type ColumnFiltersState, type SortingState, type VisibilityState, type PaginationState, type RowSelectionState, type Table } from '@tanstack/react-table';
+import { type UseQueryOptions } from '@tanstack/react-query';
+export interface FetcherParams {
+    pageIndex: number;
+    pageSize: number;
+    sorting: SortingState;
+    columnFilters: ColumnFiltersState;
+    globalFilter: string;
+}
+export interface FetcherResponse<TData> {
+    data: TData[];
+    totalCount?: number;
+}
+export interface UseDataTableOptions<TData> {
+    /**
+     * Unique key for the query cache
+     * @required
+     */
+    queryKey: string;
+    /**
+     * Column definitions for the table
+     */
+    columns: ColumnDef<TData>[];
+    /**
+     * Fetcher function to load data
+     * Receives fetch params and should return data + optional totalCount
+     */
+    fetcher: (params: FetcherParams) => Promise<FetcherResponse<TData>>;
+    /**
+     * Initial page size
+     * @default 10
+     */
+    initialPageSize?: number;
+    /**
+     * Initial sorting state
+     */
+    initialSorting?: SortingState;
+    /**
+     * Initial column visibility
+     */
+    initialColumnVisibility?: VisibilityState;
+    /**
+     * Whether pagination is handled manually (server-side)
+     * @default false
+     */
+    manualPagination?: boolean;
+    /**
+     * Whether sorting is handled manually (server-side)
+     * @default false
+     */
+    manualSorting?: boolean;
+    /**
+     * Whether filtering is handled manually (server-side)
+     * @default false
+     */
+    manualFiltering?: boolean;
+    /**
+     * Additional react-query options
+     * Allows customizing staleTime, gcTime, refetchInterval, etc.
+     */
+    queryOptions?: Omit<UseQueryOptions<FetcherResponse<TData>, Error>, 'queryKey' | 'queryFn'>;
+}
+export interface UseDataTableReturn<TData> {
+    /**
+     * The table instance from @tanstack/react-table
+     */
+    table: Table<TData>;
+    /**
+     * The current data array
+     */
+    data: TData[];
+    /**
+     * Whether the initial data is loading (no data yet)
+     */
+    isLoading: boolean;
+    /**
+     * Whether data is being fetched (including background refetches)
+     */
+    isFetching: boolean;
+    /**
+     * Whether a refetch is in progress
+     */
+    isRefetching: boolean;
+    /**
+     * Error if the fetch failed
+     */
+    error: Error | null;
+    /**
+     * Total count of items (for pagination)
+     */
+    totalCount: number;
+    /**
+     * Refetch the data
+     */
+    refetch: () => void;
+    /**
+     * Current global filter value
+     */
+    globalFilter: string;
+    /**
+     * Set the global filter
+     */
+    setGlobalFilter: (value: string) => void;
+    /**
+     * Current sorting state
+     */
+    sorting: SortingState;
+    /**
+     * Current pagination state
+     */
+    pagination: PaginationState;
+    /**
+     * Current column filters
+     */
+    columnFilters: ColumnFiltersState;
+    /**
+     * Current column visibility
+     */
+    columnVisibility: VisibilityState;
+    /**
+     * Current row selection
+     */
+    rowSelection: RowSelectionState;
+    /**
+     * Whether the query is in success state
+     */
+    isSuccess: boolean;
+    /**
+     * Whether the query is in error state
+     */
+    isError: boolean;
+}
+export declare function useDataTable<TData>({ queryKey, columns, fetcher, initialPageSize, initialSorting, initialColumnVisibility, manualPagination, manualSorting, manualFiltering, queryOptions, }: UseDataTableOptions<TData>): UseDataTableReturn<TData>;

package/dist/index.d.ts

@@ -66,10 +66,11 @@ export { Spinner } from './components/atoms/spinner';
 export { Switch } from './components/atoms/switch';
 export { SwitchField } from './components/molecules/switch-field';
 export { Tabs, TabsList, TabsTrigger, TabsContent } from './components/atoms/tabs';
-export { Table, TableHeader, TableBody, TableHeadRow, TableFooter, TableHead, TableRow, TableCell, TableCaption, } from './components/atoms/table';
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, } from './components/atoms/table';
 export { Textarea } from './components/atoms/textarea';
 export { TextAreaField } from './components/molecules/textarea-field';
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from './components/atoms/tooltip';
 export { TooltipField } from './components/molecules/tooltip-field';
 export { QuillEditor } from './components/atoms/quill-editor';
+export { useDataTable, type UseDataTableOptions, type UseDataTableReturn, type FetcherParams, type FetcherResponse, } from './hooks/use-data-table';
 export { cn } from './lib/utils';

package/dist/mock.d.ts

@@ -0,0 +1,3 @@
+import { ColumnDef } from '@tanstack/react-table';
+import { Product } from './app';
+export declare const columns: ColumnDef<Product>[];