@segmentify/ui 0.0.57 → 0.0.59

package/dist/src/index.d.ts

@@ -0,0 +1,102 @@
+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';
+export { BaseButton } from './components/molecules/base-button';
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbSeparator, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, } from './components/atoms/breadcrumb';
+export { Button } from './components/atoms/button';
+export { Calendar, CalendarDayButton } from './components/atoms/calendar';
+export { CampaignTitle } from './components/molecules/campaign-title';
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, } from './components/atoms/card';
+export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, } from './components/atoms/carousel';
+export { Case, ComponentSwitch, Default } from './components/atoms/component-switch';
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, type ChartConfig, } from './components/atoms/chart';
+export { Checkbox } from './components/atoms/checkbox';
+export { Collapsible, CollapsibleTrigger, CollapsibleContent } from './components/atoms/collapsible';
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, } from './components/atoms/command';
+export { ContentWrapper } from './components/atoms/content-wrapper';
+export { CreatableActionIcons } from './components/molecules/creatable-action-icons';
+export { CheckboxField } from './components/molecules/checkbox-field';
+export { ComboboxField, type ComboboxFieldItem, type ComboboxFieldInputMode, } from './components/molecules/combobox-field';
+export { AsyncCombobox, type AsyncComboboxItem } from './components/molecules/async-combobox';
+export { FormattedDate } from './components/atoms/date';
+export { DateRangePicker } from './components/molecules/date-range-picker';
+export { DebouncedInput } from './components/molecules/debounced-input';
+export { DetailedImageModal } from './components/molecules/detailed-image-modal';
+export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose, DialogOverlay, DialogPortal, } from './components/atoms/dialog';
+export { Drawer, DrawerContent, DrawerClose, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, } from './components/atoms/drawer';
+export { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from './components/atoms/dropdown-menu';
+export { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent } from './components/atoms/empty';
+export { ErrorMessage } from './components/atoms/error-message';
+export { FieldDescription } from './components/atoms/field-description';
+export { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from './components/atoms/form';
+export { FormCheckbox } from './components/molecules/form-checkbox';
+export { FormCombobox } from './components/organisms/form-combobox';
+export { FormSelect } from './components/organisms/form-select';
+export { FormTimePicker } from './components/organisms/form-time-picker';
+export { FormDatePicker } from './components/organisms/form-date-picker';
+export { FormFileUpload } from './components/organisms/form-file-upload';
+export { FormInput } from './components/organisms/form-input';
+export { FormPassword } from './components/organisms/form-password';
+export { FormRadio } from './components/organisms/form-radio';
+export { FormSlider } from './components/organisms/form-slider';
+export { FormSwitch } from './components/organisms/form-switch';
+export { FormTextarea } from './components/organisms/form-textarea';
+export { FormPhoneInput } from './components/molecules/form-phone-input';
+export { HoverCard, HoverCardContent, HoverCardTrigger } from './components/atoms/hover-card';
+export { Icon } from './components/atoms/icon';
+export { Input } from './components/atoms/input';
+export { InputField } from './components/molecules/input-field';
+export { InputOTP } from './components/atoms/input-otp';
+export { PhonePreview } from './components/atoms/phone-preview';
+export { Kbd, KbdGroup } from './components/atoms/kbd';
+export { Label } from './components/atoms/label';
+export { MessagingPhone } from './components/molecules/messaging-phone';
+export * from './types/messaging';
+export { MultiSelectDropdown } from './components/molecules/multi-select-dropdown';
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from './components/atoms/native-select';
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from './components/atoms/pagination';
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from './components/atoms/popover';
+export { PhoneInput } from './components/atoms/phone-input';
+export { PreviewCarousel } from './components/molecules/preview-carousel';
+export { PreviewRichMedia } from './components/molecules/preview-rich-media';
+export { MessagingPreview } from './components/molecules/messaging-preview';
+export { RadioGroup, RadioGroupItem } from './components/atoms/radio-group';
+export { ScrollArea, ScrollBar } from './components/atoms/scroll-area';
+export { MobilePreviewMessage } from './components/molecules/mobile-preview-message';
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, } from './components/atoms/select';
+export { SelectField } from './components/molecules/select-field';
+export { Separator } from './components/atoms/separator';
+export { SelectMultiField } from './components/molecules/select-multi-field';
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, } from './components/atoms/sheet';
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, } from './components/atoms/sidebar';
+export { Skeleton } from './components/atoms/skeleton';
+export { Slider } from './components/atoms/slider';
+export { Toaster } from './components/atoms/sonner';
+export { toast } from 'sonner';
+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, 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 { RecommendationCard } from './components/molecules/recommendation-card';
+export type { RecommendationCardProps, IntelligentAlgorithmOption, StaticAlgorithmOption, EmailAlgorithmConfig, AlgorithmType, FilterType, RecommendationCardConfig, } from './components/molecules/recommendation-card/types';
+export { QuillEditor } from './components/atoms/quill-editor';
+export { DataTable, type ColumnDef, type Column } 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, formatDate } from './lib/utils';

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

@@ -0,0 +1,13 @@
+export declare const buttonVariants: (props?: ({
+    variant?: "link" | "primary" | "secondary" | "tertiary" | "success" | "destructive" | "outline" | "ghost" | "action" | "preview" | "paginationActive" | "paginationInactive" | null | undefined;
+    size?: "none" | "default" | "xs" | "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;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const badgeVariants: (props?: ({
+    variant?: "secondary" | "success" | "destructive" | "outline" | "default" | "subtle" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const selectVariants: (props?: ({
+    variant?: "default" | "isFocused" | "multiSelected" | "isSelected" | "isControlFocused" | "isDisabled" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/src/lib/types.d.ts

@@ -0,0 +1,7 @@
+import type { ControllerRenderProps, FieldValues } from 'react-hook-form';
+export type SelectItemProps = {
+    value: string;
+    label: string;
+    name?: string;
+};
+export type FormFieldType = ControllerRenderProps<FieldValues, string>;

package/dist/src/lib/utils.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { type ClassValue } from 'clsx';
+import { type FormatOptions } from 'date-fns';
+export declare function cn(...inputs: ClassValue[]): string;
+export declare function mergeRefs<T>(...refs: (React.Ref<T> | undefined)[]): React.RefCallback<T>;
+/**
+ * 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;

package/dist/src/main.d.ts

@@ -0,0 +1 @@
+import './index.css';

package/dist/src/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/src/mock/columns.d.ts

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

package/dist/src/providers/popup-layer-provider.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Provides the nearest overlay layer (e.g. Dialog) to
+ * descendant portaled popups (Combobox, Select, etc.) so they can render above
+ * the overlay rather than behind it.
+ *
+ * DialogContent reads its own computed z-index and provides it through this
+ * context. Portaled popup components consume it and
+ * apply `zIndex: value + 1` as an inline style, guaranteeing they stack on top
+ * of whatever overlay contains them — regardless of the specific z-index value.
+ *
+ * When no overlay layer is present the context is `undefined` and consumers
+ * fall back to their default class-based z-index (`z-50`).
+ */
+export declare const PopupLayerContext: import("react").Context<HTMLDivElement | undefined>;

package/dist/src/types/messaging.d.ts

@@ -0,0 +1,34 @@
+export type MessageFormat = 'TEXT' | 'IMAGE';
+export type MessageButtonType = 'URL' | 'PHONE_NUMBER' | 'QUICK_REPLY';
+export type MessageButton = {
+    text: string;
+    type?: MessageButtonType;
+    url?: string;
+};
+export type MessageHeader = {
+    format: MessageFormat;
+    text?: string;
+    image?: string;
+};
+export type MessageBody = {
+    text: string;
+};
+export type MessageFooter = {
+    text: string;
+};
+export type MessageCarouselCard = {
+    body: {
+        text: string;
+    };
+    buttons: MessageButton[];
+    header?: MessageHeader;
+};
+export type MessagingPhoneProps = {
+    header?: MessageHeader;
+    body: MessageBody;
+    footer?: MessageFooter;
+    buttons?: MessageButton[];
+    carousel?: {
+        cards: MessageCarouselCard[];
+    };
+};

package/dist/ui.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
 @layer properties;
 :root, :host {
   --ui-font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@segmentify/ui",
-  "version": "0.0.57",
+  "version": "0.0.59",
   "description": "A collection of reusable React UI components built with Tailwind CSS and Radix UI",
   "repository": {
     "type": "git",
@@ -36,7 +36,7 @@
     "sonner": "^2.0.7"
   },
   "dependencies": {
-    "@base-ui/react": "^1.1.0",
+    "@base-ui/react": "^1.5.0",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-aspect-ratio": "^1.1.8",
     "@radix-ui/react-avatar": "^1.1.11",
@@ -56,70 +56,71 @@
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
+    "@segmentify/common": "0.0.3",
     "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "date-fns": "^4.1.0",
+    "date-fns": "^4.2.1",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.4.2",
     "next-themes": "^0.4.6",
     "quill": "^2.0.3",
     "radix-ui": "^1.4.3",
-    "react-day-picker": "^9.13.0",
+    "react-day-picker": "^9.14.0",
     "react-phone-number-input": "^3.4.16",
     "react-select": "^5.10.2",
-    "tailwind-merge": "^3.4.0",
+    "tailwind-merge": "^3.6.0",
     "vaul": "^1.1.2"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.29.8",
-    "@chromatic-com/storybook": "^4.1.3",
-    "@eslint/js": "^9.39.2",
-    "@storybook/addon-a11y": "^10.1.10",
-    "@storybook/addon-docs": "^10.1.10",
-    "@storybook/addon-themes": "^10.1.10",
-    "@storybook/addon-vitest": "^10.1.10",
-    "@storybook/react-vite": "^10.1.10",
-    "@tailwindcss/cli": "^4.1.18",
-    "@tailwindcss/vite": "^4.1.18",
-    "@tanstack/react-query": "^5.90.19",
-    "@types/node": "^25.0.3",
-    "@types/react": "^19.2.7",
+    "@changesets/cli": "^2.31.0",
+    "@chromatic-com/storybook": "^5.2.1",
+    "@eslint/js": "^10.0.1",
+    "@storybook/addon-a11y": "^10.4.1",
+    "@storybook/addon-docs": "^10.4.1",
+    "@storybook/addon-themes": "^10.4.1",
+    "@storybook/addon-vitest": "^10.4.1",
+    "@storybook/react-vite": "^10.4.1",
+    "@tailwindcss/cli": "^4.3.0",
+    "@tailwindcss/vite": "^4.3.0",
+    "@tanstack/react-query": "^5.100.11",
+    "@types/node": "^25.9.1",
+    "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.2",
-    "@vitest/browser-playwright": "^4.0.16",
-    "@vitest/coverage-v8": "^4.0.16",
-    "eslint": "^9.39.2",
+    "@vitejs/plugin-react": "^6.0.2",
+    "@vitest/browser-playwright": "^4.1.7",
+    "@vitest/coverage-v8": "^4.1.7",
+    "eslint": "^10.4.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-import-resolver-typescript": "^4.4.4",
-    "eslint-plugin-boundaries": "^5.3.1",
-    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-boundaries": "^6.0.2",
+    "eslint-plugin-import-x": "^4.16.2",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-prettier": "^5.5.4",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.26",
-    "eslint-plugin-unicorn": "^62.0.0",
-    "globals": "^16.5.0",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "eslint-plugin-unicorn": "^64.0.0",
+    "globals": "^17.6.0",
     "husky": "^9.1.7",
-    "knip": "^5.76.1",
-    "lint-staged": "^16.2.7",
-    "lucide-react": "^0.562.0",
-    "playwright": "^1.57.0",
-    "prettier": "3.7.4",
+    "knip": "^6.14.2",
+    "lint-staged": "^17.0.5",
+    "lucide-react": "^1.16.0",
+    "playwright": "^1.60.0",
+    "prettier": "3.8.3",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "react-hook-form": "7.71.2",
+    "react-hook-form": "7.76.0",
     "recharts": "2.15.4",
     "sonner": "^2.0.7",
-    "storybook": "^10.1.10",
-    "tailwindcss": "^4.1.18",
+    "storybook": "^10.4.1",
+    "tailwindcss": "^4.3.0",
     "ts-toolbelt": "^9.6.0",
     "tw-animate-css": "^1.4.0",
-    "typescript": "~5.9.3",
-    "typescript-eslint": "^8.50.0",
-    "vite": "^7.3.0",
-    "vitest": "^4.0.16"
+    "typescript": "~6.0.3",
+    "typescript-eslint": "^8.59.4",
+    "vite": "^8.0.14",
+    "vitest": "^4.1.7"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [