@segmentify/ui 0.0.58 → 0.0.60

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

@@ -0,0 +1,17 @@
+import { ColumnVisibility } from './column-visibility';
+import { Content } from './content';
+import { Root } from './root';
+import { Search } from './search';
+import { Toolbar } from './toolbar';
+export type { ActionItem, ActionsProps } from './actions';
+export type { RenderRowSubComponentProps } from './content';
+export { type ColumnDef, type Column } from '@tanstack/react-table';
+export declare const DataTable: {
+    Root: typeof Root;
+    Toolbar: typeof Toolbar;
+    Search: typeof Search;
+    ColumnVisibility: typeof ColumnVisibility;
+    Content: typeof Content;
+    Pagination: ({ showSelectedCount, showPaginationInfo, className, showPerPageLabel, selectPlaceholder, selectedCountText, paginationInfoText, }: import("./pagination").PaginationProps) => import("react/jsx-runtime").JSX.Element;
+    Actions: ({ actions }: import("./actions").ActionsProps) => import("react/jsx-runtime").JSX.Element | null;
+};

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

@@ -0,0 +1,10 @@
+export interface PaginationProps {
+    showSelectedCount?: boolean;
+    showPaginationInfo?: boolean;
+    className?: string;
+    showPerPageLabel?: string;
+    selectPlaceholder?: string;
+    selectedCountText?: (selected: number, total: number) => string;
+    paginationInfoText?: (start: number, end: number, total: number) => string;
+}
+export declare const Pagination: ({ showSelectedCount, showPaginationInfo, className, showPerPageLabel, selectPlaceholder, selectedCountText, paginationInfoText, }: PaginationProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/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;
+    search?: string;
+    onSearchChange?: (value: string) => void;
+    totalCount?: number;
+    className?: string;
+}
+export declare function Root<TData>({ table, children, isLoading, search, onSearchChange, totalCount, className, }: RootProps<TData>): import("react/jsx-runtime").JSX.Element;
+export {};

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

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

package/dist/src/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/src/components/organisms/date-preset/context.d.ts

@@ -0,0 +1,8 @@
+import { type DateRange } from './presets';
+export interface DatePresetContextValue {
+    range: DateRange;
+    preset: string | null;
+    setRange: (range: DateRange, preset?: string | null) => void;
+}
+export declare const DatePresetContext: import("react").Context<DatePresetContextValue | null>;
+export declare function useDatePreset(): DatePresetContextValue;

package/dist/src/components/organisms/date-preset/date-preset.d.ts

@@ -0,0 +1,11 @@
+import { type Locale } from 'date-fns';
+import { type DatePresetItem } from './presets';
+export interface DatePresetProps {
+    presets?: Record<string, DatePresetItem>;
+    className?: string;
+    confirmLabel?: string;
+    placeholder?: string;
+    disabledCondition?: boolean | ((date: Date) => boolean);
+    dateLocale?: Locale;
+}
+export declare function DatePreset({ presets, className, confirmLabel, placeholder, disabledCondition, dateLocale, }: DatePresetProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/organisms/date-preset/index.d.ts

@@ -0,0 +1,8 @@
+export type { DateRange, DatePresetItem } from './presets';
+export type { DatePresetContextValue } from './context';
+export type { DatePresetProps } from './date-preset';
+export type { DatePresetProviderProps } from './root';
+export { DATE_PRESETS, DEFAULT_PRESET_KEY, findMatchingPreset } from './presets';
+export { useDatePreset } from './context';
+export { DatePreset } from './date-preset';
+export { DatePresetProvider } from './root';

package/dist/src/components/organisms/date-preset/presets.d.ts

@@ -0,0 +1,21 @@
+export interface DateRange {
+    from: Date;
+    to: Date;
+}
+export interface DateRangeOptional {
+    from?: Date;
+    to?: Date;
+}
+export interface DatePresetItem {
+    key: string;
+    label: string;
+    getRange: () => DateRange;
+}
+export declare const DATE_PRESETS: Record<string, DatePresetItem>;
+export declare const DEFAULT_PRESET_KEY = "LAST_7_DAYS";
+/**
+ * Finds a matching preset for a given date range.
+ * Compares dates by day (ignores time).
+ * @returns The matching preset key or null if no match found.
+ */
+export declare function findMatchingPreset(range: DateRange, presets?: Record<string, DatePresetItem>): string | null;

package/dist/src/components/organisms/date-preset/root.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+import { type DateRange } from './presets';
+export interface DatePresetProviderProps {
+    children: ReactNode;
+    initialRange?: DateRange;
+    initialPreset?: string | null;
+    onRangeChange?: (range: DateRange, preset: string | null) => void;
+}
+export declare function DatePresetProvider({ children, initialRange, initialPreset, onRangeChange, }: DatePresetProviderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,21 @@
+import { type Control, type FieldValues, type Path } from 'react-hook-form';
+import { type ComboboxFieldItem } from '../../../components/molecules/combobox-field';
+type FormComboboxProps<TFieldValues extends FieldValues = FieldValues> = {
+    name: Path<TFieldValues>;
+    label?: string;
+    placeholder?: string;
+    items: ComboboxFieldItem[];
+    description?: string;
+    multiple?: boolean;
+    emptyMessage?: string;
+    containerClassName?: string;
+    hasClearButton?: boolean;
+    hasAllOption?: boolean;
+    allOptionLabel?: string;
+    disabled?: boolean;
+    tooltipContent?: string;
+    control?: Control<TFieldValues>;
+    inputMode?: 'input' | 'popup';
+};
+export declare const FormCombobox: <TFieldValues extends FieldValues = FieldValues>({ name, label, placeholder, items, description, multiple, emptyMessage, containerClassName, hasClearButton, hasAllOption, allOptionLabel, disabled, tooltipContent, control, inputMode, }: FormComboboxProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,13 @@
+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;
+    description?: string;
+    containerClassName?: string;
+    triggerClassName?: string;
+    showErrorPlaceholder?: boolean;
+}
+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/src/components/organisms/form-file-upload.d.ts

@@ -0,0 +1,23 @@
+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>;
+    label?: string;
+    uploadButtonLabel?: string;
+    uploadingLabel?: string;
+    uploadFailedMessage?: string;
+    description?: string;
+    accept?: string;
+    disabled?: boolean;
+    multiple?: boolean;
+    containerClassName?: ClassValue;
+    tooltipContent?: string;
+    hasRequiredIndicator?: boolean;
+    onUpload?: (file: File) => Promise<string>;
+};
+export declare const FormFileUpload: {
+    <TFieldValues extends FieldValues = FieldValues>({ name, control, label, uploadButtonLabel, uploadingLabel, uploadFailedMessage, description, accept, disabled, multiple, containerClassName, tooltipContent, hasRequiredIndicator, onUpload, }: FormFileUploadProps<TFieldValues>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/src/components/organisms/form-input.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { type Control, type FieldValues, type Path } from 'react-hook-form';
+import type { ClassValue } from 'clsx';
+type Props<TFieldValues extends FieldValues = FieldValues> = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'defaultValue'> & {
+    name: Path<TFieldValues>;
+    label: string;
+    placeholder?: string;
+    control?: Control<TFieldValues>;
+    containerClassName?: ClassValue;
+    inputClassName?: ClassValue;
+    description?: string;
+    tooltipContent?: string;
+    hasRequiredIndicator?: boolean;
+};
+export declare const FormInput: <TFieldValues extends FieldValues>({ label, containerClassName, inputClassName, name, description, placeholder, tooltipContent, hasRequiredIndicator, control, type, ...props }: Props<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,14 @@
+import { type Control, type FieldValues, type Path } from 'react-hook-form';
+import type { ClassValue } from 'clsx';
+type Props<TFieldValues extends FieldValues = FieldValues> = {
+    label: string;
+    name: Path<TFieldValues>;
+    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 {};

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

@@ -0,0 +1,15 @@
+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>;
+    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 {};

package/dist/src/components/organisms/form-select.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { type Control, type FieldValues, type Path } from 'react-hook-form';
+import { SelectField } from '../../../components/molecules/select-field';
+import type { SelectItemProps } from '../../../lib/types';
+import type { ClassValue } from 'clsx';
+type SelectFieldRest = Omit<React.ComponentProps<typeof SelectField>, 'value' | 'onChange' | 'hasFormControlWrapper' | 'label' | 'labelClassName'>;
+type FormSelectProps<TFieldValues extends FieldValues = FieldValues> = {
+    name: Path<TFieldValues>;
+    label: string;
+    options: SelectItemProps[];
+    placeholder: string;
+    control?: Control<TFieldValues>;
+    description?: string;
+    tooltipContent?: string;
+    hasRequiredIndicator?: boolean;
+    containerClassName?: ClassValue;
+} & SelectFieldRest;
+export declare const FormSelect: <TFieldValues extends FieldValues = FieldValues>({ name, label, options, placeholder, description, tooltipContent, hasRequiredIndicator, containerClassName, control, ...selectFieldProps }: FormSelectProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,23 @@
+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>;
+    label?: string;
+    description?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    leftLabel?: string;
+    rightLabel?: string;
+    showLabels?: boolean;
+    complementaryField?: Path<TFieldValues>;
+    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;
+export {};

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

@@ -0,0 +1,10 @@
+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;
+    className?: string;
+};
+export declare const FormSwitch: <TFieldValues extends FieldValues = FieldValues>({ name, label, description, control, className, ...props }: Props<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,11 @@
+import { type Control, type FieldValues, type Path } from 'react-hook-form';
+type Props<TFieldValues extends FieldValues = FieldValues> = {
+    label: string;
+    name: Path<TFieldValues>;
+    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 {};

package/dist/src/components/organisms/form-time-picker.d.ts

@@ -0,0 +1,22 @@
+/**
+ * TimePicker component for selecting time values in forms.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {string} props.name - The name of the input field for form registration.
+ * @param {string} [props.label] - The label message ID for internationalization.
+ * @param {string} [props.description] - The description message ID for internationalization.
+ * @param {string} [props.containerClassName] - Additional CSS classes for the container.
+ * @param {number} [props.step=60] - The step interval in seconds for the time input.
+ * @returns {JSX.Element} The rendered TimePicker component.
+ */
+type FormTimePickerProps = {
+    name: string;
+    label?: string;
+    description?: string;
+    containerClassName?: string;
+    showErrorPlaceholder?: boolean;
+    step?: number;
+};
+export declare const FormTimePicker: ({ name, label, description, containerClassName, showErrorPlaceholder, step, }: FormTimePickerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/organisms/timeline.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from 'react';
+import { type Locale } from 'date-fns';
+import { type LucideIcon } from 'lucide-react';
+export interface IconConfig {
+    icon: LucideIcon;
+    bg?: string;
+    text?: string;
+}
+export interface TimelineItem {
+    iconConfig: IconConfig;
+    title: string;
+    description: string;
+    timestamp: number;
+    tags?: string[];
+    topRightSlot?: ReactNode;
+    bottomRightSlot?: ReactNode;
+}
+export interface TimelineProps {
+    items: TimelineItem[];
+    header?: ReactNode;
+    className?: string;
+    onItemClick?: (item: TimelineItem, index: number) => void;
+    dateLocale?: Locale;
+}
+export declare const Timeline: ({ items, header, className, onItemClick, dateLocale }: TimelineProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,165 @@
+import { type UseQueryOptions } from '@tanstack/react-query';
+import { type ColumnDef, type ColumnFiltersState, type ColumnPinningState, type ExpandedState, type PaginationState, type RowSelectionState, type SortingState, type Table, type VisibilityState } from '@tanstack/react-table';
+export interface FetcherParams {
+    pageNo: number;
+    pageSize: number;
+    sortBy: SortingState;
+    reversed: boolean;
+    columnFilters: ColumnFiltersState;
+    search: 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'>;
+    /**
+     * Additional metadata to pass to the table instance (accessible via table.options.meta)
+     */
+    meta?: Record<string, unknown>;
+}
+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 search (global filter) value
+     */
+    search: string;
+    /**
+     * Set the search (global filter)
+     */
+    setSearch: (value: string) => void;
+    /**
+     * Current sorting state
+     */
+    sortBy: 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, meta, }: UseDataTableOptions<TData>): UseDataTableReturn<TData>;

package/dist/src/hooks/use-form-field.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { FieldError } from 'react-hook-form';
+type FormFieldContextValue = {
+    name: string;
+    error?: FieldError;
+};
+type FormItemContextValue = {
+    id: string;
+};
+export declare const FormFieldContext: React.Context<FormFieldContextValue | null>;
+export declare const FormItemContext: React.Context<FormItemContextValue | null>;
+export declare const useFormField: () => {
+    name: string;
+    error: FieldError | undefined;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+export {};

package/dist/src/hooks/use-mobile.d.ts

@@ -0,0 +1 @@
+export declare function useIsMobile(): boolean;

package/dist/src/hooks/use-popup-layer.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Returns the computed z-index of the nearest overlay layer (e.g. Dialog), or
+ * `undefined` when rendered outside one. Portaled popup components use this to
+ * set their own z-index one level higher so they appear above the overlay.
+ *
+ * @see {@link PopupLayerContext} for the full rationale.
+ */
+export declare const usePopupLayer: () => {
+    layer: HTMLDivElement | undefined;
+};

package/dist/src/hooks/use-sidebar.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export type SidebarContextProps = {
+    state: 'expanded' | 'collapsed';
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    isMobile: boolean;
+    toggleSidebar: () => void;
+};
+export declare const SidebarContext: React.Context<SidebarContextProps | null>;
+export declare function useSidebar(): SidebarContextProps;