@segmentify/ui 0.0.39 → 0.0.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/dist/components/atoms/button.d.ts +2 -2
  2. package/dist/components/atoms/content-wrapper.d.ts +1 -1
  3. package/dist/components/molecules/combobox-field.d.ts +24 -19
  4. package/dist/components/molecules/confirmation-dialog.d.ts +24 -0
  5. package/dist/components/molecules/date-range-picker.d.ts +8 -10
  6. package/dist/components/organisms/data-table/column-visibility.d.ts +2 -1
  7. package/dist/components/organisms/data-table/context.d.ts +2 -2
  8. package/dist/components/organisms/data-table/index.d.ts +1 -2
  9. package/dist/components/organisms/data-table/pagination.d.ts +1 -5
  10. package/dist/components/organisms/data-table/root.d.ts +3 -3
  11. package/dist/components/organisms/form-combobox.d.ts +14 -9
  12. package/dist/components/organisms/form-file-upload.d.ts +1 -3
  13. package/dist/hooks/use-data-table.d.ts +8 -9
  14. package/dist/index.d.ts +2 -14
  15. package/dist/lib/design-variants.d.ts +1 -1
  16. package/dist/lib/utils.d.ts +1 -27
  17. package/dist/segmentify-ui.cjs +72 -98
  18. package/dist/segmentify-ui.js +24794 -30238
  19. package/dist/ui.css +16 -34
  20. package/package.json +1 -1
  21. package/dist/components/atoms/alert-dialog.d.ts +0 -18
  22. package/dist/components/atoms/combobox.d.ts +0 -24
  23. package/dist/components/atoms/input-group.d.ts +0 -16
  24. package/dist/components/organisms/date-preset/context.d.ts +0 -8
  25. package/dist/components/organisms/date-preset/date-preset.d.ts +0 -11
  26. package/dist/components/organisms/date-preset/index.d.ts +0 -8
  27. package/dist/components/organisms/date-preset/presets.d.ts +0 -21
  28. package/dist/components/organisms/date-preset/root.d.ts +0 -9
  29. package/dist/components/organisms/timeline.d.ts +0 -25
@@ -1,10 +1,10 @@
1
1
  import * as React from 'react';
2
2
  import { type VariantProps } from 'class-variance-authority';
3
3
  import { buttonVariants } from '../../lib/design-variants';
4
- export interface ButtonProps extends React.ComponentProps<'button'> {
4
+ interface ButtonProps extends React.ComponentProps<'button'> {
5
5
  variant?: VariantProps<typeof buttonVariants>['variant'];
6
6
  size?: VariantProps<typeof buttonVariants>['size'];
7
7
  asChild?: boolean;
8
8
  }
9
- declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
9
+ declare function Button({ className, variant, size, asChild, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
10
10
  export { Button };
@@ -1,8 +1,8 @@
1
1
  import * as React from 'react';
2
2
  import type { ClassValue } from 'clsx';
3
3
  type Props = {
4
+ title: string;
4
5
  children: React.ReactNode;
5
- title?: string;
6
6
  className?: ClassValue;
7
7
  titleClassName?: string;
8
8
  header?: React.ReactNode;
@@ -1,26 +1,31 @@
1
- import React from 'react';
2
- export type ComboboxFieldItem = {
3
- value: string;
4
- label: string;
5
- disabled?: boolean;
1
+ import type { SelectItemProps } from '../../lib/types';
2
+ type TriggerProps = {
3
+ trigger: React.ReactNode;
4
+ triggerPlaceholder?: never;
5
+ } | {
6
+ trigger?: never;
7
+ triggerPlaceholder: string;
6
8
  };
7
- export type ComboboxFieldInputMode = 'input' | 'popup';
8
- type Props = {
9
- items: ComboboxFieldItem[];
10
- value: ComboboxFieldItem[];
11
- onValueChange: (values: ComboboxFieldItem[]) => void;
9
+ type Props = TriggerProps & {
10
+ isDisabled?: boolean;
11
+ options: SelectItemProps[];
12
+ isFormControlWrapper?: boolean;
13
+ avoidCollisions?: boolean;
14
+ contentClassName?: string;
15
+ inputPlaceholder: string;
16
+ emptyMessage: string;
17
+ containerClassName?: string;
18
+ contentListClassName?: string;
19
+ closeOnSelect?: boolean;
20
+ align?: 'start' | 'center' | 'end';
12
21
  label?: string;
22
+ onInputChange?: (inputValue: string) => void;
23
+ clearable?: boolean;
13
24
  multiple?: boolean;
14
- hasClearButton?: boolean;
15
- disabled?: boolean;
16
- placeholder?: string;
17
- containerClassName?: string;
18
- emptyMessage?: string;
25
+ value: string | string[];
26
+ onValueChange: (value: string | string[]) => void;
19
27
  hasAllOption?: boolean;
20
28
  allOptionLabel?: string;
21
- inputMode?: ComboboxFieldInputMode;
22
- renderPopupTrigger?: (valueElement: React.ReactNode, selectedValues: ComboboxFieldItem[]) => React.ReactElement;
23
- onInputChange?: (value: string) => void;
24
29
  };
25
- export declare const ComboboxField: ({ items, label, multiple, hasClearButton, disabled, placeholder, containerClassName, emptyMessage, hasAllOption, allOptionLabel, inputMode, renderPopupTrigger, onInputChange, value, onValueChange, }: Props) => import("react/jsx-runtime").JSX.Element;
30
+ 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;
26
31
  export {};
@@ -0,0 +1,24 @@
1
+ import React from 'react';
2
+ import type { VariantProps } from 'class-variance-authority';
3
+ import { buttonVariants } from '../../lib/design-variants';
4
+ import type { Union } from 'ts-toolbelt';
5
+ type BaseProps = {
6
+ title: string;
7
+ description: string;
8
+ onAction: () => void;
9
+ children?: React.ReactNode;
10
+ cancelLabel: string;
11
+ actionLabel: string;
12
+ actionVariant?: VariantProps<typeof buttonVariants>['variant'];
13
+ };
14
+ type ControlledProps = BaseProps & {
15
+ controlled: true;
16
+ open: boolean;
17
+ setOpen: (open: boolean) => void;
18
+ };
19
+ type UncontrolledProps = BaseProps & {
20
+ controlled?: false;
21
+ };
22
+ type Props = Union.Strict<ControlledProps | UncontrolledProps>;
23
+ export declare const ConfirmationDialog: ({ title, description, onAction, children, cancelLabel, actionLabel, actionVariant, open, setOpen, controlled, }: Props) => import("react/jsx-runtime").JSX.Element;
24
+ export {};
@@ -1,17 +1,15 @@
1
- import { type Locale } from 'date-fns';
2
1
  import { type DateRange } from 'react-day-picker';
3
2
  import { type ClassValue } from 'clsx';
4
3
  type Props = {
5
- start?: Date;
6
- end?: Date;
4
+ start: Date;
5
+ end: Date;
7
6
  onConfirm: (range: DateRange) => void;
8
- label?: string;
9
- placeholder: string;
10
- triggerButtonClassName?: ClassValue;
11
7
  className?: ClassValue;
12
- confirmLabel?: string;
13
- disabledCondition?: boolean | ((date: Date) => boolean);
14
- dateLocale?: Locale;
8
+ triggerButtonClassName?: ClassValue;
9
+ label: string;
10
+ placeholder: string;
11
+ confirmLabel: string;
12
+ disabledCondition: (date: Date) => boolean;
15
13
  };
16
- export declare const DateRangePicker: ({ start, end, onConfirm, className, triggerButtonClassName, label, placeholder, confirmLabel, disabledCondition, dateLocale, }: Props) => import("react/jsx-runtime").JSX.Element;
14
+ export declare const DateRangePicker: ({ start, end, onConfirm, className, triggerButtonClassName, label, placeholder, confirmLabel, disabledCondition, }: Props) => import("react/jsx-runtime").JSX.Element;
17
15
  export {};
@@ -1,6 +1,7 @@
1
1
  interface ColumnVisibilityProps {
2
+ inputPlaceholder?: string;
2
3
  emptyMessage?: string;
3
4
  allOptionLabel?: string;
4
5
  }
5
- export declare function ColumnVisibility({ emptyMessage, allOptionLabel, }: ColumnVisibilityProps): import("react/jsx-runtime").JSX.Element;
6
+ export declare function ColumnVisibility({ inputPlaceholder, emptyMessage, allOptionLabel, }: ColumnVisibilityProps): import("react/jsx-runtime").JSX.Element;
6
7
  export {};
@@ -2,8 +2,8 @@ import { type Table as TanstackTable } from '@tanstack/react-table';
2
2
  export interface DataTableContextValue<TData> {
3
3
  table: TanstackTable<TData>;
4
4
  isLoading: boolean;
5
- search: string;
6
- onSearchChange: (value: string) => void;
5
+ globalFilter: string;
6
+ onGlobalFilterChange: (value: string) => void;
7
7
  totalCount?: number;
8
8
  }
9
9
  export declare const DataTableContext: import("react").Context<DataTableContextValue<unknown> | null>;
@@ -5,13 +5,12 @@ import { ColumnVisibility } from './column-visibility';
5
5
  import { Content } from './content';
6
6
  export type { ActionItem, ActionsProps } from './actions';
7
7
  export type { RenderRowSubComponentProps } from './content';
8
- export { type ColumnDef } from '@tanstack/react-table';
9
8
  export declare const DataTable: {
10
9
  Root: typeof Root;
11
10
  Toolbar: typeof Toolbar;
12
11
  Search: typeof Search;
13
12
  ColumnVisibility: typeof ColumnVisibility;
14
13
  Content: typeof Content;
15
- Pagination: ({ showSelectedCount, showPaginationInfo, className, showPerPageLabel, selectPlaceholder, selectedCountText, paginationInfoText, }: import("./pagination").PaginationProps) => import("react/jsx-runtime").JSX.Element;
14
+ Pagination: ({ showSelectedCount, showPaginationInfo, className }: import("./pagination").PaginationProps) => import("react/jsx-runtime").JSX.Element;
16
15
  Actions: ({ actions }: import("./actions").ActionsProps) => import("react/jsx-runtime").JSX.Element | null;
17
16
  };
@@ -2,9 +2,5 @@ export interface PaginationProps {
2
2
  showSelectedCount?: boolean;
3
3
  showPaginationInfo?: boolean;
4
4
  className?: string;
5
- showPerPageLabel?: string;
6
- selectPlaceholder?: string;
7
- selectedCountText?: (selected: number, total: number) => string;
8
- paginationInfoText?: (start: number, end: number, total: number) => string;
9
5
  }
10
- export declare const Pagination: ({ showSelectedCount, showPaginationInfo, className, showPerPageLabel, selectPlaceholder, selectedCountText, paginationInfoText, }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
6
+ export declare const Pagination: ({ showSelectedCount, showPaginationInfo, className }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
@@ -4,10 +4,10 @@ interface RootProps<TData> {
4
4
  table: TanstackTable<TData>;
5
5
  children: ReactNode;
6
6
  isLoading?: boolean;
7
- search?: string;
8
- onSearchChange?: (value: string) => void;
7
+ globalFilter?: string;
8
+ onGlobalFilterChange?: (value: string) => void;
9
9
  totalCount?: number;
10
10
  className?: string;
11
11
  }
12
- export declare function Root<TData>({ table, children, isLoading, search, onSearchChange, totalCount, className, }: RootProps<TData>): import("react/jsx-runtime").JSX.Element;
12
+ export declare function Root<TData>({ table, children, isLoading, globalFilter, onGlobalFilterChange, totalCount, className, }: RootProps<TData>): import("react/jsx-runtime").JSX.Element;
13
13
  export {};
@@ -1,21 +1,26 @@
1
1
  import { type Control, type FieldValues, type Path } from 'react-hook-form';
2
- import { type ComboboxFieldItem } from '../../components/molecules/combobox-field';
2
+ import type { SelectItemProps } from '../../lib/types';
3
3
  type FormComboboxProps<TFieldValues extends FieldValues = FieldValues> = {
4
4
  name: Path<TFieldValues>;
5
- label?: string;
6
- placeholder?: string;
7
- items: ComboboxFieldItem[];
5
+ label: string;
6
+ triggerPlaceholder: string;
7
+ inputPlaceholder: string;
8
+ options: SelectItemProps[];
8
9
  description?: string;
9
10
  multiple?: boolean;
10
- emptyMessage?: string;
11
+ emptyMessage: string;
11
12
  containerClassName?: string;
12
- hasClearButton?: boolean;
13
+ contentClassName?: string;
14
+ contentListClassName?: string;
15
+ avoidCollisions?: boolean;
16
+ clearable?: boolean;
13
17
  hasAllOption?: boolean;
14
18
  allOptionLabel?: string;
15
- disabled?: boolean;
19
+ closeOnSelect?: boolean;
20
+ onInputChange?: (inputValue: string) => void;
21
+ isDisabled?: boolean;
16
22
  tooltipContent?: string;
17
23
  control?: Control<TFieldValues>;
18
- inputMode?: 'input' | 'popup';
19
24
  };
20
- 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;
25
+ 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;
21
26
  export {};
@@ -5,8 +5,6 @@ type FormFileUploadProps<TFieldValues extends FieldValues = FieldValues> = {
5
5
  control?: Control<TFieldValues>;
6
6
  label?: string;
7
7
  uploadButtonLabel?: string;
8
- uploadingLabel?: string;
9
- uploadFailedMessage?: string;
10
8
  description?: string;
11
9
  accept?: string;
12
10
  disabled?: boolean;
@@ -17,7 +15,7 @@ type FormFileUploadProps<TFieldValues extends FieldValues = FieldValues> = {
17
15
  onUpload?: (file: File) => Promise<string>;
18
16
  };
19
17
  export declare const FormFileUpload: {
20
- <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;
18
+ <TFieldValues extends FieldValues = FieldValues>({ name, control, label, uploadButtonLabel, description, accept, disabled, multiple, containerClassName, tooltipContent, hasRequiredIndicator, onUpload, }: FormFileUploadProps<TFieldValues>): import("react/jsx-runtime").JSX.Element;
21
19
  displayName: string;
22
20
  };
23
21
  export {};
@@ -1,12 +1,11 @@
1
1
  import { type ColumnDef, type ColumnFiltersState, type SortingState, type VisibilityState, type PaginationState, type RowSelectionState, type ColumnPinningState, type ExpandedState, type Table } from '@tanstack/react-table';
2
2
  import { type UseQueryOptions } from '@tanstack/react-query';
3
3
  export interface FetcherParams {
4
- pageNo: number;
4
+ pageIndex: number;
5
5
  pageSize: number;
6
- sortBy: SortingState;
7
- reversed: boolean;
6
+ sorting: SortingState;
8
7
  columnFilters: ColumnFiltersState;
9
- search: string;
8
+ globalFilter: string;
10
9
  }
11
10
  export interface FetcherResponse<TData> {
12
11
  data: TData[];
@@ -114,17 +113,17 @@ export interface UseDataTableReturn<TData> {
114
113
  */
115
114
  refetch: () => void;
116
115
  /**
117
- * Current search (global filter) value
116
+ * Current global filter value
118
117
  */
119
- search: string;
118
+ globalFilter: string;
120
119
  /**
121
- * Set the search (global filter)
120
+ * Set the global filter
122
121
  */
123
- setSearch: (value: string) => void;
122
+ setGlobalFilter: (value: string) => void;
124
123
  /**
125
124
  * Current sorting state
126
125
  */
127
- sortBy: SortingState;
126
+ sorting: SortingState;
128
127
  /**
129
128
  * Current pagination state
130
129
  */
package/dist/index.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './components/atoms/accordion';
2
- export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, } from './components/atoms/alert-dialog';
3
2
  export { AspectRatio } from './components/atoms/aspect-ratio';
4
3
  export { Avatar, AvatarFallback, AvatarImage } from './components/atoms/avatar';
5
4
  export { Badge } from './components/atoms/badge';
@@ -18,6 +17,7 @@ export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, Comman
18
17
  export { ContentWrapper } from './components/atoms/content-wrapper';
19
18
  export { CreatableActionIcons } from './components/molecules/creatable-action-icons';
20
19
  export { CheckboxField } from './components/molecules/checkbox-field';
20
+ export { ConfirmationDialog } from './components/molecules/confirmation-dialog';
21
21
  export { ComboboxField } from './components/molecules/combobox-field';
22
22
  export { FormattedDate } from './components/atoms/date';
23
23
  export { DateRangePicker } from './components/molecules/date-range-picker';
@@ -62,7 +62,6 @@ export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupActio
62
62
  export { Skeleton } from './components/atoms/skeleton';
63
63
  export { Slider } from './components/atoms/slider';
64
64
  export { Toaster } from './components/atoms/sonner';
65
- export { toast } from 'sonner';
66
65
  export { Spinner } from './components/atoms/spinner';
67
66
  export { Switch } from './components/atoms/switch';
68
67
  export { SwitchField } from './components/molecules/switch-field';
@@ -70,19 +69,8 @@ export { Tabs, TabsList, TabsTrigger, TabsContent } from './components/atoms/tab
70
69
  export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, } from './components/atoms/table';
71
70
  export { Textarea } from './components/atoms/textarea';
72
71
  export { TextAreaField } from './components/molecules/textarea-field';
73
- export { Timeline, type IconConfig, type TimelineItem, type TimelineProps } from './components/organisms/timeline';
74
72
  export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from './components/atoms/tooltip';
75
73
  export { TooltipField } from './components/molecules/tooltip-field';
76
74
  export { QuillEditor } from './components/atoms/quill-editor';
77
- export { DataTable, type ColumnDef } from './components/organisms/data-table';
78
- export type { ActionItem, ActionsProps, RenderRowSubComponentProps } from './components/organisms/data-table';
79
- export { DatePreset } from './components/organisms/date-preset/date-preset';
80
- export { DatePresetProvider } from './components/organisms/date-preset/root';
81
- export { useDatePreset } from './components/organisms/date-preset/context';
82
- export { DATE_PRESETS, DEFAULT_PRESET_KEY, findMatchingPreset } from './components/organisms/date-preset/presets';
83
- export type { DateRange, DatePresetItem } from './components/organisms/date-preset/presets';
84
- export type { DatePresetProps } from './components/organisms/date-preset/date-preset';
85
- export type { DatePresetProviderProps } from './components/organisms/date-preset/root';
86
- export type { DatePresetContextValue } from './components/organisms/date-preset/context';
87
75
  export { useDataTable, type UseDataTableOptions, type UseDataTableReturn, type FetcherParams, type FetcherResponse, } from './hooks/use-data-table';
88
- export { cn, formatDate } from './lib/utils';
76
+ export { cn } from './lib/utils';
@@ -1,6 +1,6 @@
1
1
  export declare const buttonVariants: (props?: ({
2
2
  variant?: "link" | "primary" | "secondary" | "tertiary" | "success" | "destructive" | "outline" | "ghost" | "action" | "paginationActive" | "paginationInactive" | null | undefined;
3
- size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
3
+ size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
4
4
  } & import("class-variance-authority/types").ClassProp) | undefined) => string;
5
5
  export declare const labelVariants: (props?: ({
6
6
  variant?: "default" | null | undefined;
@@ -1,29 +1,3 @@
1
1
  import { type ClassValue } from 'clsx';
2
- import { type FormatOptions } from 'date-fns';
3
2
  export declare function cn(...inputs: ClassValue[]): string;
4
- /**
5
- * Formats a Date object into a localized string using date-fns.
6
- * Falls back to formatting the current date if the provided date is invalid.
7
- *
8
- * @param date - The Date object to format.
9
- * @param desiredFormat - A date-fns format string. Default: `'MMM d, yyyy h:mmaaa'`
10
- * @param options - date-fns `FormatOptions` for locale, week start day, etc.
11
- * @returns The formatted date string.
12
- *
13
- * @example
14
- * // Default English format
15
- * formatDate(new Date('2026-02-05T15:30:00'));
16
- * // => "Feb 5, 2026 3:30pm"
17
- *
18
- * @example
19
- * // Turkish locale
20
- * import { tr } from 'date-fns/locale';
21
- * formatDate(new Date('2026-02-05T15:30:00'), undefined, { locale: tr });
22
- * // => "Şub 5, 2026 3:30öö"
23
- *
24
- * @example
25
- * // Custom format
26
- * formatDate(new Date('2026-02-05'), 'dd/MM/yyyy');
27
- * // => "05/02/2026"
28
- */
29
- export declare const formatDate: (date: Date, desiredFormat?: string, options?: FormatOptions) => string;
3
+ export declare const formatDate: (date: Date, desiredFormat?: string) => string;