@segmentify/ui 0.0.33 → 0.0.34

package/README.md

@@ -38,10 +38,14 @@ function App() {
 
 ### Styling
 
-Don't forget to import the CSS in your main entry file:
+Import the CSS in your main entry file and wrap your application (or the part using the library) with the `ui-lib-root` class to ensure styles are correctly applied and do not conflict with your own Tailwind CSS:
 
 ```tsx
 import '@segmentify/ui/dist/ui.css';
+
+function App() {
+  return <div className="ui-lib-root">{/* your app components */}</div>;
+}
 ```
 
 ## Development

package/dist/components/atoms/content-wrapper.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import type { ClassValue } from 'clsx';
 type Props = {
+    title: string;
     children: React.ReactNode;
-    title?: string;
     className?: ClassValue;
     titleClassName?: string;
     header?: React.ReactNode;

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

@@ -1,26 +1,31 @@
-import React from 'react';
-export type ComboboxFieldItem = {
-    value: string;
-    label: string;
-    disabled?: boolean;
+import type { SelectItemProps } from '../../lib/types';
+type TriggerProps = {
+    trigger: React.ReactNode;
+    triggerPlaceholder?: never;
+} | {
+    trigger?: never;
+    triggerPlaceholder: string;
 };
-export type ComboboxFieldInputMode = 'input' | 'popup';
-type Props = {
-    items: ComboboxFieldItem[];
-    value: ComboboxFieldItem[];
-    onValueChange: (values: ComboboxFieldItem[]) => void;
+type Props = TriggerProps & {
+    isDisabled?: boolean;
+    options: SelectItemProps[];
+    isFormControlWrapper?: boolean;
+    avoidCollisions?: boolean;
+    contentClassName?: string;
+    inputPlaceholder: string;
+    emptyMessage: string;
+    containerClassName?: string;
+    contentListClassName?: string;
+    closeOnSelect?: boolean;
+    align?: 'start' | 'center' | 'end';
     label?: string;
+    onInputChange?: (inputValue: string) => void;
+    clearable?: boolean;
     multiple?: boolean;
-    hasClearButton?: boolean;
-    disabled?: boolean;
-    placeholder?: string;
-    containerClassName?: string;
-    emptyMessage?: string;
+    value: string | string[];
+    onValueChange: (value: string | string[]) => void;
     hasAllOption?: boolean;
     allOptionLabel?: string;
-    inputMode?: ComboboxFieldInputMode;
-    renderPopupTrigger?: (valueElement: React.ReactNode, selectedValues: ComboboxFieldItem[]) => React.ReactElement;
-    onInputChange?: (value: string) => void;
 };
-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;
+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

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { VariantProps } from 'class-variance-authority';
+import { buttonVariants } from '../../lib/design-variants';
+import type { Union } from 'ts-toolbelt';
+type BaseProps = {
+    title: string;
+    description: string;
+    onAction: () => void;
+    children?: React.ReactNode;
+    cancelLabel: string;
+    actionLabel: string;
+    actionVariant?: VariantProps<typeof buttonVariants>['variant'];
+};
+type ControlledProps = BaseProps & {
+    controlled: true;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+};
+type UncontrolledProps = BaseProps & {
+    controlled?: false;
+};
+type Props = Union.Strict<ControlledProps | UncontrolledProps>;
+export declare const ConfirmationDialog: ({ title, description, onAction, children, cancelLabel, actionLabel, actionVariant, open, setOpen, controlled, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/molecules/date-range-picker.d.ts

@@ -1,17 +1,15 @@
-import { type Locale } from 'date-fns';
 import { type DateRange } from 'react-day-picker';
 import { type ClassValue } from 'clsx';
 type Props = {
-    start?: Date;
-    end?: Date;
+    start: Date;
+    end: Date;
     onConfirm: (range: DateRange) => void;
-    label?: string;
-    placeholder: string;
-    triggerButtonClassName?: ClassValue;
     className?: ClassValue;
-    confirmLabel?: string;
-    disabledCondition?: boolean | ((date: Date) => boolean);
-    dateLocale?: Locale;
+    triggerButtonClassName?: ClassValue;
+    label: string;
+    placeholder: string;
+    confirmLabel: string;
+    disabledCondition: (date: Date) => boolean;
 };
-export declare const DateRangePicker: ({ start, end, onConfirm, className, triggerButtonClassName, label, placeholder, confirmLabel, disabledCondition, dateLocale, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const DateRangePicker: ({ start, end, onConfirm, className, triggerButtonClassName, label, placeholder, confirmLabel, disabledCondition, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

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

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

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

@@ -5,13 +5,12 @@ import { ColumnVisibility } from './column-visibility';
 import { Content } from './content';
 export type { ActionItem, ActionsProps } from './actions';
 export type { RenderRowSubComponentProps } from './content';
-export { type ColumnDef } 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;
+    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

@@ -2,9 +2,5 @@ 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;
+export declare const Pagination: ({ showSelectedCount, showPaginationInfo, className }: PaginationProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,21 +1,26 @@
 import { type Control, type FieldValues, type Path } from 'react-hook-form';
-import { type ComboboxFieldItem } from '../../components/molecules/combobox-field';
+import type { SelectItemProps } from '../../lib/types';
 type FormComboboxProps<TFieldValues extends FieldValues = FieldValues> = {
     name: Path<TFieldValues>;
-    label?: string;
-    placeholder?: string;
-    items: ComboboxFieldItem[];
+    label: string;
+    triggerPlaceholder: string;
+    inputPlaceholder: string;
+    options: SelectItemProps[];
     description?: string;
     multiple?: boolean;
-    emptyMessage?: string;
+    emptyMessage: string;
     containerClassName?: string;
-    hasClearButton?: boolean;
+    contentClassName?: string;
+    contentListClassName?: string;
+    avoidCollisions?: boolean;
+    clearable?: boolean;
     hasAllOption?: boolean;
     allOptionLabel?: string;
-    disabled?: boolean;
+    closeOnSelect?: boolean;
+    onInputChange?: (inputValue: string) => void;
+    isDisabled?: 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 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-file-upload.d.ts

@@ -5,8 +5,6 @@ type FormFileUploadProps<TFieldValues extends FieldValues = FieldValues> = {
     control?: Control<TFieldValues>;
     label?: string;
     uploadButtonLabel?: string;
-    uploadingLabel?: string;
-    uploadFailedMessage?: string;
     description?: string;
     accept?: string;
     disabled?: boolean;
@@ -17,7 +15,7 @@ type FormFileUploadProps<TFieldValues extends FieldValues = FieldValues> = {
     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;
+    <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/index.d.ts

@@ -1,5 +1,4 @@
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './components/atoms/accordion';
-export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, } from './components/atoms/alert-dialog';
 export { AspectRatio } from './components/atoms/aspect-ratio';
 export { Avatar, AvatarFallback, AvatarImage } from './components/atoms/avatar';
 export { Badge } from './components/atoms/badge';
@@ -18,6 +17,7 @@ export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, Comman
 export { ContentWrapper } from './components/atoms/content-wrapper';
 export { CreatableActionIcons } from './components/molecules/creatable-action-icons';
 export { CheckboxField } from './components/molecules/checkbox-field';
+export { ConfirmationDialog } from './components/molecules/confirmation-dialog';
 export { ComboboxField } from './components/molecules/combobox-field';
 export { FormattedDate } from './components/atoms/date';
 export { DateRangePicker } from './components/molecules/date-range-picker';
@@ -69,19 +69,8 @@ export { Tabs, TabsList, TabsTrigger, TabsContent } from './components/atoms/tab
 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 { Timeline, type IconConfig, type TimelineItem, type TimelineProps } from './components/organisms/timeline';
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from './components/atoms/tooltip';
 export { TooltipField } from './components/molecules/tooltip-field';
 export { QuillEditor } from './components/atoms/quill-editor';
-export { DataTable, type ColumnDef } from './components/organisms/data-table';
-export type { ActionItem, ActionsProps, RenderRowSubComponentProps } from './components/organisms/data-table';
-export { DatePreset } from './components/organisms/date-preset/date-preset';
-export { DatePresetProvider } from './components/organisms/date-preset/root';
-export { useDatePreset } from './components/organisms/date-preset/context';
-export { DATE_PRESETS, DEFAULT_PRESET_KEY, findMatchingPreset } from './components/organisms/date-preset/presets';
-export type { DateRange, DatePresetItem } from './components/organisms/date-preset/presets';
-export type { DatePresetProps } from './components/organisms/date-preset/date-preset';
-export type { DatePresetProviderProps } from './components/organisms/date-preset/root';
-export type { DatePresetContextValue } from './components/organisms/date-preset/context';
 export { useDataTable, type UseDataTableOptions, type UseDataTableReturn, type FetcherParams, type FetcherResponse, } from './hooks/use-data-table';
 export { cn } from './lib/utils';

package/dist/lib/design-variants.d.ts

@@ -1,6 +1,6 @@
 export declare const buttonVariants: (props?: ({
     variant?: "link" | "primary" | "secondary" | "tertiary" | "success" | "destructive" | "outline" | "ghost" | "action" | "paginationActive" | "paginationInactive" | null | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const labelVariants: (props?: ({
     variant?: "default" | null | undefined;

package/dist/lib/utils.d.ts

@@ -1,29 +1,3 @@
 import { type ClassValue } from 'clsx';
-import { type FormatOptions } from 'date-fns';
 export declare function cn(...inputs: ClassValue[]): string;
-/**
- * Formats a Date object into a localized string using date-fns.
- * Falls back to formatting the current date if the provided date is invalid.
- *
- * @param date - The Date object to format.
- * @param desiredFormat - A date-fns format string. Default: `'MMM d, yyyy h:mmaaa'`
- * @param options - date-fns `FormatOptions` for locale, week start day, etc.
- * @returns The formatted date string.
- *
- * @example
- * // Default English format
- * formatDate(new Date('2026-02-05T15:30:00'));
- * // => "Feb 5, 2026 3:30pm"
- *
- * @example
- * // Turkish locale
- * import { tr } from 'date-fns/locale';
- * formatDate(new Date('2026-02-05T15:30:00'), undefined, { locale: tr });
- * // => "Şub 5, 2026 3:30öö"
- *
- * @example
- * // Custom format
- * formatDate(new Date('2026-02-05'), 'dd/MM/yyyy');
- * // => "05/02/2026"
- */
-export declare const formatDate: (date: Date, desiredFormat?: string, options?: FormatOptions) => string;
+export declare const formatDate: (date: Date, desiredFormat?: string) => string;