@segmentify/ui 0.0.24 → 0.0.25

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

@@ -1,29 +1,15 @@
 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';
-    size?: VariantProps<typeof buttonVariants>['size'];
-    variant?: VariantProps<typeof buttonVariants>['variant'];
+declare const BaseButton: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & {
+    size?: VariantProps<typeof buttonVariants>["size"];
+    variant?: VariantProps<typeof buttonVariants>["variant"];
     label?: string;
-    suffix?: boolean;
-    prefix?: boolean;
+    isSuffix?: boolean;
+    isPrefix?: boolean;
     isLoading?: boolean;
-    onClick?: () => void;
     labelClassName?: string;
-    disabled?: boolean;
-    form?: string;
-};
-type IconOnlyProps = BaseProps & {
-    isIconOnly: true;
-    icon: React.ReactNode;
-};
-type DefaultButtonProps = BaseProps & {
-    isIconOnly?: false;
+    isIconOnly?: boolean;
     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;
+} & 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/confirmation-dialog.d.ts

@@ -6,7 +6,7 @@ type BaseProps = {
     title: string;
     description: string;
     onAction: () => void;
-    children: React.ReactNode;
+    children?: React.ReactNode;
     cancelLabel: string;
     actionLabel: string;
     actionVariant?: VariantProps<typeof buttonVariants>['variant'];

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/molecules/select-field.d.ts

@@ -4,14 +4,15 @@ import type { SelectItemProps } from '../../lib/types';
 interface SelectFieldProps extends React.ComponentProps<typeof Select> {
     options: SelectItemProps[];
     placeholder: string;
-    triggerClassName: string;
-    containerClassName: string;
     onChange: (value: string) => void;
     value: string;
-    label: string;
+    label?: string;
+    labelClassName?: string;
+    triggerClassName?: string;
+    containerClassName?: string;
     isPortal?: boolean;
     hasFormControlWrapper?: boolean;
     selectContentClassName?: string;
 }
-export declare const SelectField: ({ options, placeholder, hasFormControlWrapper, selectContentClassName, onChange, value, label, triggerClassName, containerClassName, isPortal, ...props }: SelectFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectField: ({ options, placeholder, hasFormControlWrapper, selectContentClassName, onChange, value, label, triggerClassName, labelClassName, containerClassName, isPortal, ...props }: SelectFieldProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+export interface ActionItem {
+    label: string;
+    icon?: ReactNode;
+    onClick: () => void;
+    variant?: 'default' | 'destructive';
+    disabled?: boolean;
+}
+export interface ActionsProps {
+    actions: ActionItem[];
+}
+export declare const Actions: ({ actions }: ActionsProps) => import("react/jsx-runtime").JSX.Element | null;

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,18 @@
+import { ReactNode } from 'react';
+import { type Row } from '@tanstack/react-table';
+export interface RenderRowSubComponentProps<TData = unknown> {
+    row: Row<TData>;
+}
+interface ContentProps {
+    className?: string;
+    loadingContent?: ReactNode;
+    emptyContent?: ReactNode;
+    /**
+     * Render a sub-component below a row when it's expanded.
+     * The sub-component can handle its own data fetching and render sub-rows.
+     * @example ({ row }) => <SubRowAsync row={row} />
+     */
+    renderRowSubComponent?: (props: RenderRowSubComponentProps) => ReactNode;
+}
+export declare function Content({ className, loadingContent, emptyContent, renderRowSubComponent, }: ContentProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,10 @@
+import { type Table as TanstackTable } from '@tanstack/react-table';
+export interface DataTableContextValue<TData> {
+    table: TanstackTable<TData>;
+    isLoading: boolean;
+    globalFilter: string;
+    onGlobalFilterChange: (value: string) => void;
+    totalCount?: number;
+}
+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,16 @@
+import { Root } from './root';
+import { Toolbar } from './toolbar';
+import { Search } from './search';
+import { ColumnVisibility } from './column-visibility';
+import { Content } from './content';
+export type { ActionItem, ActionsProps } from './actions';
+export type { RenderRowSubComponentProps } from './content';
+export declare const DataTable: {
+    Root: typeof Root;
+    Toolbar: typeof Toolbar;
+    Search: typeof Search;
+    ColumnVisibility: typeof ColumnVisibility;
+    Content: typeof Content;
+    Pagination: ({ showSelectedCount, showPaginationInfo, className }: import("./pagination").PaginationProps) => import("react/jsx-runtime").JSX.Element;
+    Actions: ({ actions }: import("./actions").ActionsProps) => import("react/jsx-runtime").JSX.Element | null;
+};

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

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

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

@@ -0,0 +1,13 @@
+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;
+    totalCount?: number;
+    className?: string;
+}
+export declare function Root<TData>({ table, children, isLoading, globalFilter, onGlobalFilterChange, totalCount, 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-checkbox.d.ts

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

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

@@ -2,25 +2,25 @@ 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>;
     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;
+    control?: Control<TFieldValues>;
 };
-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: <TFieldValues extends FieldValues = FieldValues>({ name, label, triggerPlaceholder, inputPlaceholder, options, description, multiple, emptyMessage, containerClassName, contentClassName, contentListClassName, avoidCollisions, clearable, hasAllOption, allOptionLabel, closeOnSelect, onInputChange, isDisabled, tooltipContent, control, }: FormComboboxProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/organisms/form-date-picker.d.ts

@@ -1,5 +1,7 @@
-export interface FormDatePickerProps {
-    name: string;
+import { type Control, type FieldValues, type Path } from 'react-hook-form';
+export interface FormDatePickerProps<TFieldValues extends FieldValues = FieldValues> {
+    name: Path<TFieldValues>;
+    control?: Control<TFieldValues>;
     disabledCondition?: boolean | ((date: Date) => boolean);
     label?: string;
     placeholder?: string;
@@ -8,4 +10,4 @@ export interface FormDatePickerProps {
     triggerClassName?: string;
     showErrorPlaceholder?: boolean;
 }
-export declare const FormDatePicker: ({ name, disabledCondition, label, placeholder, description, containerClassName, triggerClassName, showErrorPlaceholder, }: FormDatePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FormDatePicker: <TFieldValues extends FieldValues = FieldValues>({ name, control, disabledCondition, label, placeholder, description, containerClassName, triggerClassName, showErrorPlaceholder, }: FormDatePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,160 @@
+import { type ColumnDef, type ColumnFiltersState, type SortingState, type VisibilityState, type PaginationState, type RowSelectionState, type ColumnPinningState, type ExpandedState, 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;
+    /**
+     * Initial column pinning state
+     * @example { left: ['select'], right: ['actions'] }
+     */
+    initialColumnPinning?: ColumnPinningState;
+    /**
+     * 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;
+    /**
+     * Function to get sub-rows from a row (for expandable rows)
+     * @example (row) => row.subRows
+     */
+    getSubRows?: (row: TData) => TData[] | undefined;
+    /**
+     * Function to determine if a row can be expanded.
+     * Set to `() => true` to allow all rows to expand (useful for lazy-loaded sub-components).
+     * @example () => true
+     * @example (row) => row.original.hasDetails
+     */
+    getRowCanExpand?: (row: {
+        original: TData;
+    }) => 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;
+    /**
+     * Current column pinning state
+     */
+    columnPinning: ColumnPinningState;
+    /**
+     * Current expanded state
+     */
+    expanded: ExpandedState;
+    /**
+     * 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, initialColumnPinning, manualPagination, manualSorting, manualFiltering, getSubRows, getRowCanExpand, 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/actions.d.ts

@@ -0,0 +1,6 @@
+import { Product } from '../app';
+type ProductActionsProps = {
+    product: Product;
+};
+export declare const ProductActions: ({ product }: ProductActionsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/mock/columns.d.ts

@@ -0,0 +1,9 @@
+import { ColumnDef } from '@tanstack/react-table';
+import { Product } from '../app';
+import { type ReactNode } from 'react';
+export type ColumnDefWithSubCell<TData> = ColumnDef<TData> & {
+    meta?: {
+        subCell?: (data: TData) => ReactNode;
+    };
+};
+export declare const columns: ColumnDefWithSubCell<Product>[];