@bizapps/ui 1.5.1 → 1.7.0

package/dist/main.d.cts

@@ -4,6 +4,8 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
 import { VariantProps } from 'class-variance-authority';
 import { Avatar as Avatar$1, Label as Label$1, Toggle as Toggle$1, ToggleGroup as ToggleGroup$1, Select as Select$1, Separator as Separator$1, Progress as Progress$1, Slider as Slider$1, Switch as Switch$1, Tabs as Tabs$1, Tooltip as Tooltip$1, Popover as Popover$1, Dialog as Dialog$1, AlertDialog as AlertDialog$1, Accordion as Accordion$1, DropdownMenu as DropdownMenu$1, RadioGroup as RadioGroup$1, NavigationMenu as NavigationMenu$1, Checkbox as Checkbox$1 } from 'radix-ui';
 import useEmblaCarousel, { UseEmblaCarouselType } from 'embla-carousel-react';
+import { PhoneFieldValidity } from './phone.cjs';
+export { PhoneFieldProblem, validatePhone } from './phone.cjs';
 import { DropzoneOptions, FileRejection, DropEvent } from 'react-dropzone';
 import Color from 'color';
 import { DateRange } from 'react-day-picker';
@@ -241,6 +243,15 @@ interface PhoneFieldProps extends Omit<ComponentProps<'input'>, 'value' | 'defau
     value?: string;
     /** Emits the E.164 form whenever the national number changes; emits "" when empty. */
     onValueChange?: (value: string) => void;
+    /**
+     * Emits whether the current value is a valid number, and why it is not when
+     * it fails. Fires on mount and on every change of the verdict — including
+     * changes caused by picking another country, which do not always change the
+     * value. It emits STATE, never copy: the message belongs to the consumer's
+     * i18n catalog. For the same rule outside React (Zod schema, route handler)
+     * import `validatePhone` from `@bizapps/design-system-testing/phone`.
+     */
+    onValidityChange?: (validity: PhoneFieldValidity) => void;
     /** ISO code preselected when `value` is empty, e.g. "CO". Falls back to the first country. */
     defaultCountry?: string;
     /** Placeholder for the number input. */
@@ -258,7 +269,7 @@ interface PhoneFieldProps extends Omit<ComponentProps<'input'>, 'value' | 'defau
      */
     name?: string;
 }
-declare function PhoneField({ countries, value, onValueChange, defaultCountry, placeholder, disabled, className, container, name, ...inputProps }: PhoneFieldProps): react.JSX.Element;
+declare function PhoneField({ countries, value, onValueChange, onValidityChange, defaultCountry, placeholder, disabled, className, container, name, ...inputProps }: PhoneFieldProps): react.JSX.Element;
 
 interface PinInputProps {
     length?: number;
@@ -1280,6 +1291,45 @@ declare const logos: {
 };
 type LogoKey = keyof typeof logos;
 
+/**
+ * Brand palette for the celebration burst, resolved from the `--color-main-*`
+ * tokens rather than referenced through them: the canvas is appended to the
+ * body, outside the themed tree, so `var()` would resolve against the document
+ * root and miss any scoped override anyway.
+ *
+ * `--color-main-white` is deliberately absent. The app paints its page ground
+ * `--color-main-light-background` (#f1f5f7), which swallows white particles.
+ */
+declare const CONFETTI_COLORS: readonly ["#22205f", "#f66a24", "#faca4a", "#01d42f", "#d93235"];
+type FireConfettiOptions = {
+    /** Particles per cannon. Two cannons fire, so the burst is twice this. */
+    particleCount?: number;
+    /** Vertical launch point: 0 is the top of the viewport, 1 the bottom. */
+    originY?: number;
+    /** Overrides the brand palette. Any CSS color string canvas can parse. */
+    colors?: string[];
+};
+/**
+ * Fires a celebration burst from two cannons angled inward at the lower corners
+ * of the viewport.
+ *
+ * The geometry is the whole point. A single centred burst reads as a puff and
+ * dies mid-screen; the crossfire covers the full width, which is what carries
+ * the celebration. Launching from 0.7 rather than the centre reads as confetti
+ * thrown upward instead of an explosion pushing outward.
+ *
+ * Resolves once the last particle has settled, so a caller can sequence on it.
+ * Honours `prefers-reduced-motion`, in which case it resolves immediately
+ * without drawing.
+ */
+declare function fireConfetti({ particleCount, originY, colors, }?: FireConfettiOptions): Promise<void>;
+/**
+ * Clears every burst still in flight and removes the canvas.
+ *
+ * For a caller that unmounts, or navigates away, while particles are airborne.
+ */
+declare function resetConfetti(): void;
+
 declare function Table({ className, containerClassName, ...props }: ComponentProps<'table'> & {
     /**
      * Classes for the scroll container that wraps the table. Defaults to
@@ -2248,4 +2298,4 @@ interface TCCEProviderProps {
 }
 declare function TCCEProvider({ children, permissions, toasterPosition, tooltipDelayDuration, }: TCCEProviderProps): react.JSX.Element;
 
-export { type AbilityContextValue, AbilityProvider, type AbilityProviderProps, type AbilityStatus, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, type AnimationTokens, AppShell, type AppShellItem, type AppShellProps, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BottomNav, type BottomNavItem, BottomNavTabs, BottomNavTabsContent, type BottomNavTabsItem, BottomNavTabsList, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button$1 as Button, type CalendarEvent, type CalendarView, Can, CanNot, type CanNotProps, type CanProps, type CanState, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type CellAlignment, Checkbox, ColorPicker, ColorPickerAlpha, type ColorPickerAlphaProps, ColorPickerEyeDropper, type ColorPickerEyeDropperProps, ColorPickerFormat, type ColorPickerFormatProps, ColorPickerHue, type ColorPickerHueProps, ColorPickerOutput, type ColorPickerOutputProps, ColorPickerPresets, type ColorPickerPresetsProps, type ColorPickerProps, ColorPickerSelection, type ColorPickerSelectionProps, type ColumnMeta, Combobox, type ComboboxMatchMode, type ComboboxOption, type ComboboxProps, DataTable, DataTableCardView, type DataTableCardViewProps, DataTableColumnFilter, type DataTableColumnFilterProps, DataTableFooter, type DataTableFooterProps, DataTableHeaderCell, type DataTableHeaderCellProps, type DataTableProps, DataTableRowActions, type DataTableRowActionsProps, DataTableSearch, type DataTableSearchProps, DataTableSkeleton, type DataTableSkeletonProps, DataTableToolbar, type DataTableToolbarProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, type DrawerSide, type DrawerSize, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Dropzone, DropzoneContent, type DropzoneContentProps, DropzoneEmptyState, type DropzoneEmptyStateProps, type DropzoneProps, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, EventCalendar, type EventCalendarProps, type EventCreateRange, Field, FieldDescription, FieldError, FieldGroup, FieldLabel, FilterOption, type FilterOptionProps, Input, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Label, Link, Logo, type LogoKey, MiniCalendar, MiniCalendarDay, type MiniCalendarDayProps, MiniCalendarDays, type MiniCalendarDaysProps, MiniCalendarNavigation, type MiniCalendarNavigationProps, type MiniCalendarProps, Navbar, type NavbarDropdownItem, type NavbarNavLink, type NavbarNotification, type NavbarProps, type NavbarUtilityLink, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Permission, PhoneField, type PhoneFieldCountry, type PhoneFieldProps, PinInput, type PinInputProps, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, type ProgressProps, RadioGroup, RadioGroupItem, type RowAction, SegmentedControl, SegmentedControlItem, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger$1 as SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, type SortDirection, type SortRecord, Spinner, SpinnerDots, type SpinnerDotsProps, SpinnerLoader, type SpinnerLoaderProps, type SpinnerProps, Status, StatusIndicator, type StatusIndicatorProps, StatusLabel, type StatusLabelProps, type StatusProps, Switch, TCCEProvider, type TCCEProviderProps, TEXT_SIZES, TEXT_WEIGHTS, Table, TableBody, TableCaption, TableCell, type TableCellSize, type TableClassNames, type TableColumnDef, type TableContextType, TableFooter, TableHead, TableHeader, TablePagination, type TablePaginationProps, TableRow, type TableVariant, Tabs, TabsContent, TabsList, TabsTrigger, Text, type TextAs, type TextProps, type TextSize, type TextWeight, Textarea, type ToastAction, type ToastItem, type ToastType, Toaster, type ToasterPosition, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseTableDataProps, type UseTableDataReturn, type UseTableFilteringProps, type UseTableFilteringReturn, type UseTableGlobalFilterProps, type UseTableGlobalFilterReturn, type UseTableSizingProps, type UseTableSizingReturn, type UseTableSortingProps, type UseTableSortingReturn, type UseTableVisibilityProps, type UseTableVisibilityReturn, alertVariants, animation, avatarVariants, badgeVariants, buttonVariants$1 as buttonVariants, columnFiltersToArrayQueryParams, columnFiltersToJsonString, columnFiltersToQueryParams, columnFiltersToRecord, createBackendParams, createBackendParamsWithFilters, duration, ease, fadeIn, getActiveFilterCount, getActiveFilterValues, getColumnValueCounts, getUniqueColumnValues, hasActiveFilters, linkVariants, logos, mergeFilters, multiSelectFilter, navigationMenuTriggerStyle, parseJsonToFilters, parseQueryParamsToFilters, progressIndicatorVariants, progressVariants, scaleIn, searchInArray, skeletonVariants, slideRight, slideUp, sortRecordToSortingState, sortingStateToJsonString, sortingStateToRecord, spinnerDotsVariants, spinnerLoaderVariants, spinnerVariants, spring, stagger, toggleVariants, tooltipContentVariants, transition, useAbility, useAbilityStatus, useAppForm, useCan, useCarousel, useColorPicker, useColumnFilter, useSidebar, useTableContext, useTableData, useTableFiltering, useTableGlobalFilter, useTableSizing, useTableSorting, useTableVisibility, useToast };
+export { type AbilityContextValue, AbilityProvider, type AbilityProviderProps, type AbilityStatus, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, type AnimationTokens, AppShell, type AppShellItem, type AppShellProps, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BottomNav, type BottomNavItem, BottomNavTabs, BottomNavTabsContent, type BottomNavTabsItem, BottomNavTabsList, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button$1 as Button, CONFETTI_COLORS, type CalendarEvent, type CalendarView, Can, CanNot, type CanNotProps, type CanProps, type CanState, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type CellAlignment, Checkbox, ColorPicker, ColorPickerAlpha, type ColorPickerAlphaProps, ColorPickerEyeDropper, type ColorPickerEyeDropperProps, ColorPickerFormat, type ColorPickerFormatProps, ColorPickerHue, type ColorPickerHueProps, ColorPickerOutput, type ColorPickerOutputProps, ColorPickerPresets, type ColorPickerPresetsProps, type ColorPickerProps, ColorPickerSelection, type ColorPickerSelectionProps, type ColumnMeta, Combobox, type ComboboxMatchMode, type ComboboxOption, type ComboboxProps, DataTable, DataTableCardView, type DataTableCardViewProps, DataTableColumnFilter, type DataTableColumnFilterProps, DataTableFooter, type DataTableFooterProps, DataTableHeaderCell, type DataTableHeaderCellProps, type DataTableProps, DataTableRowActions, type DataTableRowActionsProps, DataTableSearch, type DataTableSearchProps, DataTableSkeleton, type DataTableSkeletonProps, DataTableToolbar, type DataTableToolbarProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, type DrawerSide, type DrawerSize, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Dropzone, DropzoneContent, type DropzoneContentProps, DropzoneEmptyState, type DropzoneEmptyStateProps, type DropzoneProps, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, EventCalendar, type EventCalendarProps, type EventCreateRange, Field, FieldDescription, FieldError, FieldGroup, FieldLabel, FilterOption, type FilterOptionProps, type FireConfettiOptions, Input, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Label, Link, Logo, type LogoKey, MiniCalendar, MiniCalendarDay, type MiniCalendarDayProps, MiniCalendarDays, type MiniCalendarDaysProps, MiniCalendarNavigation, type MiniCalendarNavigationProps, type MiniCalendarProps, Navbar, type NavbarDropdownItem, type NavbarNavLink, type NavbarNotification, type NavbarProps, type NavbarUtilityLink, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Permission, PhoneField, type PhoneFieldCountry, type PhoneFieldProps, PhoneFieldValidity, PinInput, type PinInputProps, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, type ProgressProps, RadioGroup, RadioGroupItem, type RowAction, SegmentedControl, SegmentedControlItem, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger$1 as SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, type SortDirection, type SortRecord, Spinner, SpinnerDots, type SpinnerDotsProps, SpinnerLoader, type SpinnerLoaderProps, type SpinnerProps, Status, StatusIndicator, type StatusIndicatorProps, StatusLabel, type StatusLabelProps, type StatusProps, Switch, TCCEProvider, type TCCEProviderProps, TEXT_SIZES, TEXT_WEIGHTS, Table, TableBody, TableCaption, TableCell, type TableCellSize, type TableClassNames, type TableColumnDef, type TableContextType, TableFooter, TableHead, TableHeader, TablePagination, type TablePaginationProps, TableRow, type TableVariant, Tabs, TabsContent, TabsList, TabsTrigger, Text, type TextAs, type TextProps, type TextSize, type TextWeight, Textarea, type ToastAction, type ToastItem, type ToastType, Toaster, type ToasterPosition, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseTableDataProps, type UseTableDataReturn, type UseTableFilteringProps, type UseTableFilteringReturn, type UseTableGlobalFilterProps, type UseTableGlobalFilterReturn, type UseTableSizingProps, type UseTableSizingReturn, type UseTableSortingProps, type UseTableSortingReturn, type UseTableVisibilityProps, type UseTableVisibilityReturn, alertVariants, animation, avatarVariants, badgeVariants, buttonVariants$1 as buttonVariants, columnFiltersToArrayQueryParams, columnFiltersToJsonString, columnFiltersToQueryParams, columnFiltersToRecord, createBackendParams, createBackendParamsWithFilters, duration, ease, fadeIn, fireConfetti, getActiveFilterCount, getActiveFilterValues, getColumnValueCounts, getUniqueColumnValues, hasActiveFilters, linkVariants, logos, mergeFilters, multiSelectFilter, navigationMenuTriggerStyle, parseJsonToFilters, parseQueryParamsToFilters, progressIndicatorVariants, progressVariants, resetConfetti, scaleIn, searchInArray, skeletonVariants, slideRight, slideUp, sortRecordToSortingState, sortingStateToJsonString, sortingStateToRecord, spinnerDotsVariants, spinnerLoaderVariants, spinnerVariants, spring, stagger, toggleVariants, tooltipContentVariants, transition, useAbility, useAbilityStatus, useAppForm, useCan, useCarousel, useColorPicker, useColumnFilter, useSidebar, useTableContext, useTableData, useTableFiltering, useTableGlobalFilter, useTableSizing, useTableSorting, useTableVisibility, useToast };

package/dist/main.d.ts

@@ -4,6 +4,8 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
 import { VariantProps } from 'class-variance-authority';
 import { Avatar as Avatar$1, Label as Label$1, Toggle as Toggle$1, ToggleGroup as ToggleGroup$1, Select as Select$1, Separator as Separator$1, Progress as Progress$1, Slider as Slider$1, Switch as Switch$1, Tabs as Tabs$1, Tooltip as Tooltip$1, Popover as Popover$1, Dialog as Dialog$1, AlertDialog as AlertDialog$1, Accordion as Accordion$1, DropdownMenu as DropdownMenu$1, RadioGroup as RadioGroup$1, NavigationMenu as NavigationMenu$1, Checkbox as Checkbox$1 } from 'radix-ui';
 import useEmblaCarousel, { UseEmblaCarouselType } from 'embla-carousel-react';
+import { PhoneFieldValidity } from './phone.js';
+export { PhoneFieldProblem, validatePhone } from './phone.js';
 import { DropzoneOptions, FileRejection, DropEvent } from 'react-dropzone';
 import Color from 'color';
 import { DateRange } from 'react-day-picker';
@@ -241,6 +243,15 @@ interface PhoneFieldProps extends Omit<ComponentProps<'input'>, 'value' | 'defau
     value?: string;
     /** Emits the E.164 form whenever the national number changes; emits "" when empty. */
     onValueChange?: (value: string) => void;
+    /**
+     * Emits whether the current value is a valid number, and why it is not when
+     * it fails. Fires on mount and on every change of the verdict — including
+     * changes caused by picking another country, which do not always change the
+     * value. It emits STATE, never copy: the message belongs to the consumer's
+     * i18n catalog. For the same rule outside React (Zod schema, route handler)
+     * import `validatePhone` from `@bizapps/design-system-testing/phone`.
+     */
+    onValidityChange?: (validity: PhoneFieldValidity) => void;
     /** ISO code preselected when `value` is empty, e.g. "CO". Falls back to the first country. */
     defaultCountry?: string;
     /** Placeholder for the number input. */
@@ -258,7 +269,7 @@ interface PhoneFieldProps extends Omit<ComponentProps<'input'>, 'value' | 'defau
      */
     name?: string;
 }
-declare function PhoneField({ countries, value, onValueChange, defaultCountry, placeholder, disabled, className, container, name, ...inputProps }: PhoneFieldProps): react.JSX.Element;
+declare function PhoneField({ countries, value, onValueChange, onValidityChange, defaultCountry, placeholder, disabled, className, container, name, ...inputProps }: PhoneFieldProps): react.JSX.Element;
 
 interface PinInputProps {
     length?: number;
@@ -1280,6 +1291,45 @@ declare const logos: {
 };
 type LogoKey = keyof typeof logos;
 
+/**
+ * Brand palette for the celebration burst, resolved from the `--color-main-*`
+ * tokens rather than referenced through them: the canvas is appended to the
+ * body, outside the themed tree, so `var()` would resolve against the document
+ * root and miss any scoped override anyway.
+ *
+ * `--color-main-white` is deliberately absent. The app paints its page ground
+ * `--color-main-light-background` (#f1f5f7), which swallows white particles.
+ */
+declare const CONFETTI_COLORS: readonly ["#22205f", "#f66a24", "#faca4a", "#01d42f", "#d93235"];
+type FireConfettiOptions = {
+    /** Particles per cannon. Two cannons fire, so the burst is twice this. */
+    particleCount?: number;
+    /** Vertical launch point: 0 is the top of the viewport, 1 the bottom. */
+    originY?: number;
+    /** Overrides the brand palette. Any CSS color string canvas can parse. */
+    colors?: string[];
+};
+/**
+ * Fires a celebration burst from two cannons angled inward at the lower corners
+ * of the viewport.
+ *
+ * The geometry is the whole point. A single centred burst reads as a puff and
+ * dies mid-screen; the crossfire covers the full width, which is what carries
+ * the celebration. Launching from 0.7 rather than the centre reads as confetti
+ * thrown upward instead of an explosion pushing outward.
+ *
+ * Resolves once the last particle has settled, so a caller can sequence on it.
+ * Honours `prefers-reduced-motion`, in which case it resolves immediately
+ * without drawing.
+ */
+declare function fireConfetti({ particleCount, originY, colors, }?: FireConfettiOptions): Promise<void>;
+/**
+ * Clears every burst still in flight and removes the canvas.
+ *
+ * For a caller that unmounts, or navigates away, while particles are airborne.
+ */
+declare function resetConfetti(): void;
+
 declare function Table({ className, containerClassName, ...props }: ComponentProps<'table'> & {
     /**
      * Classes for the scroll container that wraps the table. Defaults to
@@ -2248,4 +2298,4 @@ interface TCCEProviderProps {
 }
 declare function TCCEProvider({ children, permissions, toasterPosition, tooltipDelayDuration, }: TCCEProviderProps): react.JSX.Element;
 
-export { type AbilityContextValue, AbilityProvider, type AbilityProviderProps, type AbilityStatus, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, type AnimationTokens, AppShell, type AppShellItem, type AppShellProps, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BottomNav, type BottomNavItem, BottomNavTabs, BottomNavTabsContent, type BottomNavTabsItem, BottomNavTabsList, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button$1 as Button, type CalendarEvent, type CalendarView, Can, CanNot, type CanNotProps, type CanProps, type CanState, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type CellAlignment, Checkbox, ColorPicker, ColorPickerAlpha, type ColorPickerAlphaProps, ColorPickerEyeDropper, type ColorPickerEyeDropperProps, ColorPickerFormat, type ColorPickerFormatProps, ColorPickerHue, type ColorPickerHueProps, ColorPickerOutput, type ColorPickerOutputProps, ColorPickerPresets, type ColorPickerPresetsProps, type ColorPickerProps, ColorPickerSelection, type ColorPickerSelectionProps, type ColumnMeta, Combobox, type ComboboxMatchMode, type ComboboxOption, type ComboboxProps, DataTable, DataTableCardView, type DataTableCardViewProps, DataTableColumnFilter, type DataTableColumnFilterProps, DataTableFooter, type DataTableFooterProps, DataTableHeaderCell, type DataTableHeaderCellProps, type DataTableProps, DataTableRowActions, type DataTableRowActionsProps, DataTableSearch, type DataTableSearchProps, DataTableSkeleton, type DataTableSkeletonProps, DataTableToolbar, type DataTableToolbarProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, type DrawerSide, type DrawerSize, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Dropzone, DropzoneContent, type DropzoneContentProps, DropzoneEmptyState, type DropzoneEmptyStateProps, type DropzoneProps, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, EventCalendar, type EventCalendarProps, type EventCreateRange, Field, FieldDescription, FieldError, FieldGroup, FieldLabel, FilterOption, type FilterOptionProps, Input, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Label, Link, Logo, type LogoKey, MiniCalendar, MiniCalendarDay, type MiniCalendarDayProps, MiniCalendarDays, type MiniCalendarDaysProps, MiniCalendarNavigation, type MiniCalendarNavigationProps, type MiniCalendarProps, Navbar, type NavbarDropdownItem, type NavbarNavLink, type NavbarNotification, type NavbarProps, type NavbarUtilityLink, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Permission, PhoneField, type PhoneFieldCountry, type PhoneFieldProps, PinInput, type PinInputProps, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, type ProgressProps, RadioGroup, RadioGroupItem, type RowAction, SegmentedControl, SegmentedControlItem, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger$1 as SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, type SortDirection, type SortRecord, Spinner, SpinnerDots, type SpinnerDotsProps, SpinnerLoader, type SpinnerLoaderProps, type SpinnerProps, Status, StatusIndicator, type StatusIndicatorProps, StatusLabel, type StatusLabelProps, type StatusProps, Switch, TCCEProvider, type TCCEProviderProps, TEXT_SIZES, TEXT_WEIGHTS, Table, TableBody, TableCaption, TableCell, type TableCellSize, type TableClassNames, type TableColumnDef, type TableContextType, TableFooter, TableHead, TableHeader, TablePagination, type TablePaginationProps, TableRow, type TableVariant, Tabs, TabsContent, TabsList, TabsTrigger, Text, type TextAs, type TextProps, type TextSize, type TextWeight, Textarea, type ToastAction, type ToastItem, type ToastType, Toaster, type ToasterPosition, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseTableDataProps, type UseTableDataReturn, type UseTableFilteringProps, type UseTableFilteringReturn, type UseTableGlobalFilterProps, type UseTableGlobalFilterReturn, type UseTableSizingProps, type UseTableSizingReturn, type UseTableSortingProps, type UseTableSortingReturn, type UseTableVisibilityProps, type UseTableVisibilityReturn, alertVariants, animation, avatarVariants, badgeVariants, buttonVariants$1 as buttonVariants, columnFiltersToArrayQueryParams, columnFiltersToJsonString, columnFiltersToQueryParams, columnFiltersToRecord, createBackendParams, createBackendParamsWithFilters, duration, ease, fadeIn, getActiveFilterCount, getActiveFilterValues, getColumnValueCounts, getUniqueColumnValues, hasActiveFilters, linkVariants, logos, mergeFilters, multiSelectFilter, navigationMenuTriggerStyle, parseJsonToFilters, parseQueryParamsToFilters, progressIndicatorVariants, progressVariants, scaleIn, searchInArray, skeletonVariants, slideRight, slideUp, sortRecordToSortingState, sortingStateToJsonString, sortingStateToRecord, spinnerDotsVariants, spinnerLoaderVariants, spinnerVariants, spring, stagger, toggleVariants, tooltipContentVariants, transition, useAbility, useAbilityStatus, useAppForm, useCan, useCarousel, useColorPicker, useColumnFilter, useSidebar, useTableContext, useTableData, useTableFiltering, useTableGlobalFilter, useTableSizing, useTableSorting, useTableVisibility, useToast };
+export { type AbilityContextValue, AbilityProvider, type AbilityProviderProps, type AbilityStatus, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, type AnimationTokens, AppShell, type AppShellItem, type AppShellProps, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BottomNav, type BottomNavItem, BottomNavTabs, BottomNavTabsContent, type BottomNavTabsItem, BottomNavTabsList, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button$1 as Button, CONFETTI_COLORS, type CalendarEvent, type CalendarView, Can, CanNot, type CanNotProps, type CanProps, type CanState, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type CellAlignment, Checkbox, ColorPicker, ColorPickerAlpha, type ColorPickerAlphaProps, ColorPickerEyeDropper, type ColorPickerEyeDropperProps, ColorPickerFormat, type ColorPickerFormatProps, ColorPickerHue, type ColorPickerHueProps, ColorPickerOutput, type ColorPickerOutputProps, ColorPickerPresets, type ColorPickerPresetsProps, type ColorPickerProps, ColorPickerSelection, type ColorPickerSelectionProps, type ColumnMeta, Combobox, type ComboboxMatchMode, type ComboboxOption, type ComboboxProps, DataTable, DataTableCardView, type DataTableCardViewProps, DataTableColumnFilter, type DataTableColumnFilterProps, DataTableFooter, type DataTableFooterProps, DataTableHeaderCell, type DataTableHeaderCellProps, type DataTableProps, DataTableRowActions, type DataTableRowActionsProps, DataTableSearch, type DataTableSearchProps, DataTableSkeleton, type DataTableSkeletonProps, DataTableToolbar, type DataTableToolbarProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, type DrawerSide, type DrawerSize, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Dropzone, DropzoneContent, type DropzoneContentProps, DropzoneEmptyState, type DropzoneEmptyStateProps, type DropzoneProps, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, EventCalendar, type EventCalendarProps, type EventCreateRange, Field, FieldDescription, FieldError, FieldGroup, FieldLabel, FilterOption, type FilterOptionProps, type FireConfettiOptions, Input, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Label, Link, Logo, type LogoKey, MiniCalendar, MiniCalendarDay, type MiniCalendarDayProps, MiniCalendarDays, type MiniCalendarDaysProps, MiniCalendarNavigation, type MiniCalendarNavigationProps, type MiniCalendarProps, Navbar, type NavbarDropdownItem, type NavbarNavLink, type NavbarNotification, type NavbarProps, type NavbarUtilityLink, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Permission, PhoneField, type PhoneFieldCountry, type PhoneFieldProps, PhoneFieldValidity, PinInput, type PinInputProps, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, type ProgressProps, RadioGroup, RadioGroupItem, type RowAction, SegmentedControl, SegmentedControlItem, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger$1 as SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, type SortDirection, type SortRecord, Spinner, SpinnerDots, type SpinnerDotsProps, SpinnerLoader, type SpinnerLoaderProps, type SpinnerProps, Status, StatusIndicator, type StatusIndicatorProps, StatusLabel, type StatusLabelProps, type StatusProps, Switch, TCCEProvider, type TCCEProviderProps, TEXT_SIZES, TEXT_WEIGHTS, Table, TableBody, TableCaption, TableCell, type TableCellSize, type TableClassNames, type TableColumnDef, type TableContextType, TableFooter, TableHead, TableHeader, TablePagination, type TablePaginationProps, TableRow, type TableVariant, Tabs, TabsContent, TabsList, TabsTrigger, Text, type TextAs, type TextProps, type TextSize, type TextWeight, Textarea, type ToastAction, type ToastItem, type ToastType, Toaster, type ToasterPosition, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseTableDataProps, type UseTableDataReturn, type UseTableFilteringProps, type UseTableFilteringReturn, type UseTableGlobalFilterProps, type UseTableGlobalFilterReturn, type UseTableSizingProps, type UseTableSizingReturn, type UseTableSortingProps, type UseTableSortingReturn, type UseTableVisibilityProps, type UseTableVisibilityReturn, alertVariants, animation, avatarVariants, badgeVariants, buttonVariants$1 as buttonVariants, columnFiltersToArrayQueryParams, columnFiltersToJsonString, columnFiltersToQueryParams, columnFiltersToRecord, createBackendParams, createBackendParamsWithFilters, duration, ease, fadeIn, fireConfetti, getActiveFilterCount, getActiveFilterValues, getColumnValueCounts, getUniqueColumnValues, hasActiveFilters, linkVariants, logos, mergeFilters, multiSelectFilter, navigationMenuTriggerStyle, parseJsonToFilters, parseQueryParamsToFilters, progressIndicatorVariants, progressVariants, resetConfetti, scaleIn, searchInArray, skeletonVariants, slideRight, slideUp, sortRecordToSortingState, sortingStateToJsonString, sortingStateToRecord, spinnerDotsVariants, spinnerLoaderVariants, spinnerVariants, spring, stagger, toggleVariants, tooltipContentVariants, transition, useAbility, useAbilityStatus, useAppForm, useCan, useCarousel, useColorPicker, useColumnFilter, useSidebar, useTableContext, useTableData, useTableFiltering, useTableGlobalFilter, useTableSizing, useTableSorting, useTableVisibility, useToast };

package/dist/main.js

@@ -8,9 +8,9 @@ import { createContext, memo, useRef, useState, useMemo, useCallback, useEffect,
 import { Avatar as Avatar$1, Checkbox as Checkbox$1, Slot, Select as Select$1, Label as Label$1, Popover as Popover$1, Toggle as Toggle$1, ToggleGroup, Separator as Separator$1, Progress as Progress$1, Slider as Slider$1, Switch as Switch$1, Tabs as Tabs$1, Tooltip as Tooltip$1, Dialog as Dialog$1, AlertDialog as AlertDialog$1, Accordion as Accordion$1, DropdownMenu as DropdownMenu$1, RadioGroup as RadioGroup$1, NavigationMenu as NavigationMenu$1 } from 'radix-ui';
 import { isSameDay, isToday, format, addDays } from 'date-fns';
 import useEmblaCarousel from 'embla-carousel-react';
-import { parsePhoneNumberFromString, AsYouType } from 'libphonenumber-js';
+import { isValidPhoneNumber, validatePhoneNumberLength, parsePhoneNumberFromString, AsYouType } from 'libphonenumber-js';
 import { Command } from 'cmdk';
-import { VE, UY, US, SV, PY, PT, PE, PA, NI, MX, IT, IN, HN, GT, GB, FR, ES, EC, DO, DE, CU, CR, CO, CL, CA, BR, BO, AR } from 'country-flag-icons/react/3x2';
+import * as countryFlags from 'country-flag-icons/react/3x2';
 import { motion, AnimatePresence } from 'motion/react';
 import { useDropzone } from 'react-dropzone';
 import Color from 'color';
@@ -25,6 +25,7 @@ import { Temporal } from 'temporal-polyfill';
 import { useForm } from 'react-hook-form';
 export { Controller, useFieldArray } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
+import confetti from 'canvas-confetti';
 import { flexRender, useReactTable, getFilteredRowModel, getSortedRowModel, getCoreRowModel } from '@tanstack/react-table';
 export { createColumnHelper } from '@tanstack/react-table';
 
@@ -1049,6 +1050,15 @@ function Link({
     }
   );
 }
+function validatePhone(value) {
+  if (!value) {
+    return { isValid: false };
+  }
+  if (isValidPhoneNumber(value)) {
+    return { isValid: true };
+  }
+  return { isValid: false, problem: validatePhoneNumberLength(value) ?? "INVALID" };
+}
 function Popover({ ...props }) {
   return /* @__PURE__ */ jsx(Popover$1.Root, { "data-slot": "popover", ...props });
 }
@@ -1121,68 +1131,36 @@ function stripLeadingDialCode(raw, dialCode) {
   const code = dialCode.replace(/\D/g, "");
   return code && digits.startsWith(code) ? digits.length > code.length ? digits.slice(code.length) : "" : digits;
 }
-var flagByCode = {
-  AR: AR,
-  BO: BO,
-  BR: BR,
-  CA: CA,
-  CL: CL,
-  CO: CO,
-  CR: CR,
-  CU: CU,
-  DE: DE,
-  DO: DO,
-  EC: EC,
-  ES: ES,
-  FR: FR,
-  GB: GB,
-  GT: GT,
-  HN: HN,
-  IN: IN,
-  IT: IT,
-  MX: MX,
-  NI: NI,
-  PA: PA,
-  PE: PE,
-  PT: PT,
-  PY: PY,
-  SV: SV,
-  US: US,
-  UY: UY,
-  VE: VE
-};
+var flagByCode = countryFlags;
 function CountryFlag({
   code,
   flagUrl,
   className
 }) {
-  if (flagUrl) {
-    return /* @__PURE__ */ jsx(
-      "img",
-      {
-        src: flagUrl,
-        alt: "",
-        "aria-hidden": "true",
-        className: cn("size-4 shrink-0 rounded-[2px] object-cover", className)
-      }
-    );
-  }
-  const FlagComponent = flagByCode[(code || "").toUpperCase()];
-  if (FlagComponent) {
-    return /* @__PURE__ */ jsx(
-      FlagComponent,
-      {
-        "aria-hidden": "true",
-        className: cn("size-4 shrink-0 rounded-[2px]", className)
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("bg-muted size-4 shrink-0 rounded-full", className) });
+  const isoCode = (code || "").toUpperCase();
+  const FlagComponent = flagByCode[isoCode];
+  const flag = flagUrl ? /* @__PURE__ */ jsx("img", { src: flagUrl, alt: "", "aria-hidden": "true", className: "size-full object-cover" }) : FlagComponent ? /* @__PURE__ */ jsx(FlagComponent, { "aria-hidden": "true", className: "size-full" }) : null;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "phone-field-country-flag",
+      "data-country": isoCode || void 0,
+      "data-fallback": flag ? void 0 : "true",
+      "aria-hidden": "true",
+      className: cn(
+        "size-4 shrink-0 overflow-hidden rounded-[2px]",
+        !flag && "bg-muted rounded-full",
+        className
+      ),
+      children: flag
+    }
+  );
 }
 function PhoneField({
   countries,
   value,
   onValueChange,
+  onValidityChange,
   defaultCountry,
   placeholder = "Phone number",
   disabled = false,
@@ -1199,6 +1177,7 @@ function PhoneField({
   const listRef = useRef(null);
   const inputRef = useRef(null);
   const caretRef = useRef(null);
+  const lastValidityRef = useRef(null);
   const listId = `${useId()}-countries-list`;
   const isControlled = value !== void 0;
   const currentValue = isControlled ? value : internalValue;
@@ -1209,7 +1188,9 @@ function PhoneField({
   const callingCodeInList = parsedCallingCode !== void 0 && countries.some(
     (country) => country.dialCode.replace(/\D/g, "") === parsedCallingCode
   );
-  const representedCode = countryInList ? parsedCountry : callingCodeInList ? countries.find(
+  const pickedCountry = pickedCode ? countries.find((country) => country.code.toUpperCase() === pickedCode.toUpperCase()) : void 0;
+  const pickMatchesValue = pickedCountry !== void 0 && pickedCountry.dialCode.replace(/\D/g, "") === parsedCallingCode;
+  const representedCode = countryInList ? parsedCountry : pickMatchesValue ? pickedCountry.code : callingCodeInList ? countries.find(
     (country) => country.dialCode.replace(/\D/g, "") === parsedCallingCode
   )?.code : void 0;
   const selectedCode = representedCode ?? pickedCode ?? defaultCountry ?? countries[0]?.code;
@@ -1224,6 +1205,15 @@ function PhoneField({
     nationalDigits
   ) : nationalDigits;
   const isInvalid = inputProps["aria-invalid"] === true || inputProps["aria-invalid"] === "true";
+  const { isValid, problem } = validatePhone(currentValue);
+  useEffect(() => {
+    const last = lastValidityRef.current;
+    if (last && last.isValid === isValid && last.problem === problem) {
+      return;
+    }
+    lastValidityRef.current = { isValid, problem };
+    onValidityChange?.({ isValid, problem });
+  }, [isValid, problem, onValidityChange]);
   useLayoutEffect(() => {
     const input = inputRef.current;
     const caret = caretRef.current;
@@ -1316,17 +1306,21 @@ function PhoneField({
         }
       }
     }
-    if (nextPickedCode) {
-      setPickedCode(nextPickedCode);
-    }
-    if (!national) {
-      onValueChange?.("");
-      if (!isControlled) {
-        setInternalValue("");
+    const next = national ? `+${emitCode}${national}` : "";
+    const grew = national.replace(/\D/g, "").length > nationalDigits.length;
+    const isPaste = nativeEvent?.inputType === "insertFromPaste";
+    if (grew && !isPaste && validatePhoneNumberLength(next) === "TOO_LONG") {
+      if (input) {
+        const caret = Math.max(0, (input.selectionStart ?? inputValue.length) - 1);
+        input.value = inputValue;
+        input.setSelectionRange(caret, caret);
       }
+      caretRef.current = null;
       return;
     }
-    const next = `+${emitCode}${national}`;
+    if (nextPickedCode) {
+      setPickedCode(nextPickedCode);
+    }
     onValueChange?.(next);
     if (!isControlled) {
       setInternalValue(next);
@@ -7095,6 +7089,38 @@ var logos = {
   monochBlack: `${CDN_BASE}/logos/Logo_Total_monochB.webp`,
   monochOrange: `${CDN_BASE}/logos/Logo_Total_monochO.webp`
 };
+var CONFETTI_COLORS = [
+  "#22205f",
+  // --color-main-blue-primary
+  "#f66a24",
+  // --color-main-orange-primary
+  "#faca4a",
+  // --color-main-yellow-primary
+  "#01d42f",
+  // --color-main-positive-state
+  "#d93235"
+  // --color-main-warning-state
+];
+function fireConfetti({
+  particleCount = 60,
+  originY = 0.7,
+  colors = [...CONFETTI_COLORS]
+} = {}) {
+  const shared = {
+    particleCount,
+    colors,
+    spread: 70,
+    startVelocity: 55,
+    disableForReducedMotion: true
+  };
+  return Promise.all([
+    confetti({ ...shared, angle: 60, origin: { x: 0, y: originY } }),
+    confetti({ ...shared, angle: 120, origin: { x: 1, y: originY } })
+  ]).then(() => void 0);
+}
+function resetConfetti() {
+  confetti.reset();
+}
 function Table({
   className,
   containerClassName = "overflow-x-auto",
@@ -9374,6 +9400,6 @@ function TCCEProvider({
   return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: tooltipDelayDuration, children: /* @__PURE__ */ jsx(AbilityProvider, { permissions, children: /* @__PURE__ */ jsx(Toaster, { position: toasterPosition, children }) }) });
 }
 
-export { AbilityProvider, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge2 as Badge, BottomNav, BottomNavTabs, BottomNavTabsContent, BottomNavTabsList, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Can, CanNot, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, ColorPicker, ColorPickerAlpha, ColorPickerEyeDropper, ColorPickerFormat, ColorPickerHue, ColorPickerOutput, ColorPickerPresets, ColorPickerSelection, Combobox, DataTable, DataTableCardView, DataTableColumnFilter, DataTableFooter, DataTableHeaderCell, DataTableRowActions, DataTableSearch, DataTableSkeleton, DataTableToolbar, DatePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Dropzone, DropzoneContent, DropzoneEmptyState, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, EventCalendar, Field, FieldDescription, FieldError, FieldGroup, FieldLabel, FilterOption, Input, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, KNOWN_PERMISSIONS, Label, Link, Logo, MiniCalendar, MiniCalendarDay, MiniCalendarDays, MiniCalendarNavigation, Navbar, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PhoneField, PinInput, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, SegmentedControl, SegmentedControlItem, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, SpinnerDots, SpinnerLoader, Status, StatusIndicator, StatusLabel, Switch, TCCEProvider, TEXT_SIZES, TEXT_WEIGHTS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TablePagination, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, Textarea, Toaster, Toggle, ToggleGroup2 as ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, animation, avatarVariants, badgeVariants2 as badgeVariants, buttonVariants, columnFiltersToArrayQueryParams, columnFiltersToJsonString, columnFiltersToQueryParams, columnFiltersToRecord, createBackendParams, createBackendParamsWithFilters, duration, ease, fadeIn, getActiveFilterCount, getActiveFilterValues, getColumnValueCounts, getUniqueColumnValues, hasActiveFilters, linkVariants, logos, matchPermission, mergeFilters, multiSelectFilter, navigationMenuTriggerStyle, parseJsonToFilters, parseQueryParamsToFilters, progressIndicatorVariants, progressVariants, scaleIn, searchInArray, skeletonVariants, slideRight, slideUp, sortRecordToSortingState, sortingStateToJsonString, sortingStateToRecord, spinnerDotsVariants, spinnerLoaderVariants, spinnerVariants, spring, stagger, toggleVariants, tooltipContentVariants, transition, useAbility, useAbilityStatus, useAppForm, useCan, useCarousel, useColorPicker, useColumnFilter, useSidebar, useTableContext, useTableData, useTableFiltering, useTableGlobalFilter, useTableSizing, useTableSorting, useTableVisibility, useToast };
+export { AbilityProvider, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge2 as Badge, BottomNav, BottomNavTabs, BottomNavTabsContent, BottomNavTabsList, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CONFETTI_COLORS, Can, CanNot, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, ColorPicker, ColorPickerAlpha, ColorPickerEyeDropper, ColorPickerFormat, ColorPickerHue, ColorPickerOutput, ColorPickerPresets, ColorPickerSelection, Combobox, DataTable, DataTableCardView, DataTableColumnFilter, DataTableFooter, DataTableHeaderCell, DataTableRowActions, DataTableSearch, DataTableSkeleton, DataTableToolbar, DatePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Dropzone, DropzoneContent, DropzoneEmptyState, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, EventCalendar, Field, FieldDescription, FieldError, FieldGroup, FieldLabel, FilterOption, Input, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, KNOWN_PERMISSIONS, Label, Link, Logo, MiniCalendar, MiniCalendarDay, MiniCalendarDays, MiniCalendarNavigation, Navbar, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PhoneField, PinInput, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, SegmentedControl, SegmentedControlItem, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, SpinnerDots, SpinnerLoader, Status, StatusIndicator, StatusLabel, Switch, TCCEProvider, TEXT_SIZES, TEXT_WEIGHTS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TablePagination, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, Textarea, Toaster, Toggle, ToggleGroup2 as ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, animation, avatarVariants, badgeVariants2 as badgeVariants, buttonVariants, columnFiltersToArrayQueryParams, columnFiltersToJsonString, columnFiltersToQueryParams, columnFiltersToRecord, createBackendParams, createBackendParamsWithFilters, duration, ease, fadeIn, fireConfetti, getActiveFilterCount, getActiveFilterValues, getColumnValueCounts, getUniqueColumnValues, hasActiveFilters, linkVariants, logos, matchPermission, mergeFilters, multiSelectFilter, navigationMenuTriggerStyle, parseJsonToFilters, parseQueryParamsToFilters, progressIndicatorVariants, progressVariants, resetConfetti, scaleIn, searchInArray, skeletonVariants, slideRight, slideUp, sortRecordToSortingState, sortingStateToJsonString, sortingStateToRecord, spinnerDotsVariants, spinnerLoaderVariants, spinnerVariants, spring, stagger, toggleVariants, tooltipContentVariants, transition, useAbility, useAbilityStatus, useAppForm, useCan, useCarousel, useColorPicker, useColumnFilter, useSidebar, useTableContext, useTableData, useTableFiltering, useTableGlobalFilter, useTableSizing, useTableSorting, useTableVisibility, useToast, validatePhone };
 //# sourceMappingURL=main.js.map
 //# sourceMappingURL=main.js.map