@segmentify/ui 0.0.23 → 0.0.25

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

@@ -1,24 +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 = Omit<React.ComponentPropsWithoutRef<'button'>, 'children'> & {
-    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;
     labelClassName?: 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: React.ForwardRefExoticComponent<BaseButtonProps & React.RefAttributes<HTMLButtonElement>>;
+} & React.RefAttributes<HTMLButtonElement>>;
 export { BaseButton };

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/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/content.d.ts

@@ -1,8 +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, }: ContentProps): import("react/jsx-runtime").JSX.Element;
+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

@@ -4,6 +4,7 @@ export interface DataTableContextValue<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

@@ -3,11 +3,14 @@ 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, previousLabel, nextLabel, className, }: import("./pagination").PaginationProps) => import("react/jsx-runtime").JSX.Element;
+    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

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

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

@@ -6,7 +6,8 @@ interface RootProps<TData> {
     isLoading?: boolean;
     globalFilter?: string;
     onGlobalFilterChange?: (value: string) => void;
+    totalCount?: number;
     className?: string;
 }
-export declare function Root<TData>({ table, children, isLoading, globalFilter, onGlobalFilterChange, className, }: RootProps<TData>): import("react/jsx-runtime").JSX.Element;
+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/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

@@ -1,6 +1,7 @@
+import { type Control, type FieldValues, type Path } from 'react-hook-form';
 import type { SelectItemProps } from '../../lib/types';
-type Props = {
-    name: string;
+type FormComboboxProps<TFieldValues extends FieldValues = FieldValues> = {
+    name: Path<TFieldValues>;
     label: string;
     triggerPlaceholder: string;
     inputPlaceholder: string;
@@ -19,6 +20,7 @@ type Props = {
     onInputChange?: (inputValue: string) => void;
     isDisabled?: boolean;
     tooltipContent?: string;
+    control?: Control<TFieldValues>;
 };
-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 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/components/organisms/form-file-upload.d.ts

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

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

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

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

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

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

@@ -1,7 +1,9 @@
 import React from 'react';
+import { type Control, type FieldValues, type Path } from 'react-hook-form';
 import { Slider } from '../../components/atoms/slider';
-type FormSliderProps = {
-    name: string;
+type FormSliderProps<TFieldValues extends FieldValues = FieldValues> = {
+    name: Path<TFieldValues>;
+    control?: Control<TFieldValues>;
     label?: string;
     description?: string;
     min?: number;
@@ -10,12 +12,12 @@ type FormSliderProps = {
     leftLabel?: string;
     rightLabel?: string;
     showLabels?: boolean;
-    complementaryField?: string;
+    complementaryField?: Path<TFieldValues>;
     onValueChange?: (value: number) => void;
     containerClassName?: string;
     labelClassName?: string;
     showErrorPlaceholder?: boolean;
     tooltipContent?: string;
-} & 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;
+} & 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;
 export {};

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { type ColumnDef, type ColumnFiltersState, type SortingState, type VisibilityState, type PaginationState, type RowSelectionState, type Table } from '@tanstack/react-table';
+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;
@@ -39,6 +39,11 @@ export interface UseDataTableOptions<TData> {
      * 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
@@ -54,6 +59,20 @@ export interface UseDataTableOptions<TData> {
      * @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.
@@ -121,6 +140,14 @@ export interface UseDataTableReturn<TData> {
      * Current row selection
      */
     rowSelection: RowSelectionState;
+    /**
+     * Current column pinning state
+     */
+    columnPinning: ColumnPinningState;
+    /**
+     * Current expanded state
+     */
+    expanded: ExpandedState;
     /**
      * Whether the query is in success state
      */
@@ -130,4 +157,4 @@ export interface UseDataTableReturn<TData> {
      */
     isError: boolean;
 }
-export declare function useDataTable<TData>({ queryKey, columns, fetcher, initialPageSize, initialSorting, initialColumnVisibility, manualPagination, manualSorting, manualFiltering, queryOptions, }: UseDataTableOptions<TData>): UseDataTableReturn<TData>;
+export declare function useDataTable<TData>({ queryKey, columns, fetcher, initialPageSize, initialSorting, initialColumnVisibility, initialColumnPinning, manualPagination, manualSorting, manualFiltering, getSubRows, getRowCanExpand, queryOptions, }: UseDataTableOptions<TData>): UseDataTableReturn<TData>;

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>[];