periplo-ui 4.9.2 → 4.10.0

package/dist/components/DataTable/components/DataTableBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableBody.js","sources":["../../../../src/components/DataTable/components/DataTableBody.tsx"],"sourcesContent":["import { flexRender, Row, Table } from '@tanstack/react-table'\n\nimport { Skeleton } from '../../Skeleton'\nimport { TableBody, TableCell, TableRow } from '../../Table'\nimport { Typography } from '../../Typography'\nimport { EmptyStateConfig, RowIdentifierFn } from '../types'\n\nimport { DataTableCell } from './DataTableCell'\nimport { ACTIONS_COLUMN_ID, getSkeletonClassName, SELECT_COLUMN_ID } from './dataTableCellStyles'\nimport { DataTableGroupRow } from './DataTableGroupRow'\n\nimport { cn } from '@/lib/utils'\n\ntype GroupRenderConfig<TData> = {\n  readonly renderGroupRow?: (row: Row<TData>) => React.ReactNode\n  readonly renderGroupSelector?: React.ComponentType<{ row: Row<TData> }>\n  readonly isGroupOpen: (groupId: string) => boolean\n  readonly toggleGroup: (groupId: string) => void\n  readonly getRowId: RowIdentifierFn<TData>\n}\n\ntype DataTableBodyProps<TData> = {\n  readonly table: Table<TData>\n  readonly isLoading?: boolean\n  readonly pageSize: number\n  readonly getRowId: RowIdentifierFn<TData>\n  readonly rowSelection: Record<string, boolean>\n  readonly emptyState: EmptyStateConfig\n  readonly group?: GroupRenderConfig<TData>\n}\n\ntype DataTableRowProps<TData> = {\n  readonly row: Row<TData>\n  readonly isSelected: boolean\n  readonly isCollapsible?: boolean\n  readonly isOpen?: boolean\n}\n\nfunction DataTableRow<TData>({\n  row,\n  isSelected,\n  isCollapsible = false,\n  isOpen = true,\n}: DataTableRowProps<TData>) {\n  return (\n    <TableRow\n      data-selected={isSelected}\n      className={cn(isCollapsible && 'transition-colors', isCollapsible && !isOpen && 'border-b-0')}\n    >\n      {row.getVisibleCells().map((cell) => {\n        const content = cell.column.columnDef.cell && flexRender(cell.column.columnDef.cell, cell.getContext())\n\n        return (\n          <DataTableCell\n            key={cell.id}\n            columnId={cell.column.id}\n            isCollapsible={isCollapsible}\n            isOpen={isOpen}\n            style={{ width: cell.column.columnDef.size }}\n          >\n            {content}\n          </DataTableCell>\n        )\n      })}\n    </TableRow>\n  )\n}\n\nexport function DataTableBody<TData>({\n  table,\n  isLoading,\n  pageSize,\n  getRowId,\n  rowSelection,\n  emptyState,\n  group,\n}: DataTableBodyProps<TData>) {\n  if (isLoading) {\n    return (\n      <TableBody>\n        {Array.from({ length: pageSize }).map((_unused, index) => (\n          <TableRow key={`skeleton-row-${String(index)}`}>\n            {table\n              .getAllColumns()\n              .filter((column) => column.getIsVisible())\n              .map((column) => (\n                  <DataTableCell\n                    key={`skeleton-cell-${String(index)}-${column.id}`}\n                    columnId={column.id}\n                    style={{ width: column.columnDef.size }}\n                    className={\n                      column.id !== SELECT_COLUMN_ID && column.id !== ACTIONS_COLUMN_ID ? 'w-full' : undefined\n                    }\n                  >\n                    <Skeleton className={getSkeletonClassName(column.id)} />\n                  </DataTableCell>\n                ))}\n          </TableRow>\n        ))}\n      </TableBody>\n    )\n  }\n\n  const rows = table.getRowModel().rows\n\n  if (!rows.length) {\n    const visibleColumns = table.getAllColumns().filter((col) => col.getIsVisible())\n\n    return (\n      <TableBody>\n        <TableRow className=\"h-full\">\n          <TableCell colSpan={visibleColumns.length} className=\"h-full p-0\">\n            <div className=\"mt-20 flex h-full w-full flex-col items-center justify-center\">\n              {emptyState.imageRoute && (\n                <img\n                  className={cn('mb-6 w-[200px] md:w-[300px]', emptyState.imageClassName)}\n                  src={emptyState.imageRoute}\n                  alt={emptyState.imageAlt ?? 'No data available'}\n                />\n              )}\n              <Typography variant=\"title-md\" weight=\"semibold\" className=\"text-center\">\n                {emptyState.title}\n              </Typography>\n              <Typography variant=\"title-sm\" className=\"text-center opacity-80\">\n                {emptyState.description}\n              </Typography>\n            </div>\n          </TableCell>\n        </TableRow>\n      </TableBody>\n    )\n  }\n\n  const visibleColumnCount = table.getVisibleLeafColumns().length\n\n  return (\n    <TableBody>\n      {rows.map((row) => {\n        const rowId = getRowId(row.original)\n\n        if (group && row.getCanExpand()) {\n          const content = group.renderGroupRow?.(row) ?? `${String(row.getLeafRows().length)} items`\n          return (\n            <DataTableGroupRow\n              key={rowId}\n              colSpan={visibleColumnCount}\n              selector={group.renderGroupSelector ? <group.renderGroupSelector row={row} /> : undefined}\n              content={content}\n              isOpen={group.isGroupOpen(rowId)}\n              onToggle={() => group.toggleGroup(rowId)}\n            />\n          )\n        }\n\n        const isSelected = rowSelection[rowId] ?? false\n        const parentRow = group ? row.getParentRow() : undefined\n        return (\n          <DataTableRow\n            key={rowId}\n            row={row}\n            isSelected={isSelected}\n            isCollapsible={!!group}\n            isOpen={parentRow ? (group?.isGroupOpen(getRowId(parentRow.original)) ?? true) : true}\n          />\n        )\n      })}\n    </TableBody>\n  )\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DataTableBody.js","sources":["../../../../src/components/DataTable/components/DataTableBody.tsx"],"sourcesContent":["import { flexRender, Row, Table } from '@tanstack/react-table'\n\nimport { Skeleton } from '../../Skeleton'\nimport { TableBody, TableCell, TableRow } from '../../Table'\nimport { Typography } from '../../Typography'\nimport { EmptyStateConfig, RowIdentifierFn } from '../types'\n\nimport { DataTableCell } from './DataTableCell'\nimport { ACTIONS_COLUMN_ID, getSkeletonClassName, SELECT_COLUMN_ID } from './dataTableCellStyles'\nimport { DataTableGroupRow } from './DataTableGroupRow'\n\nimport { cn } from '@/lib/utils'\n\ntype GroupRenderConfig<TData> = {\n  readonly renderGroupRow?: (row: Row<TData>) => React.ReactNode\n  readonly renderGroupSelector?: React.ComponentType<{ row: Row<TData> }>\n  readonly isGroupOpen: (groupId: string) => boolean\n  readonly toggleGroup: (groupId: string) => void\n  readonly getRowId: RowIdentifierFn<TData>\n}\n\ntype DataTableBodyProps<TData> = {\n  readonly table: Table<TData>\n  readonly isLoading?: boolean\n  readonly pageSize: number\n  readonly getRowId: RowIdentifierFn<TData>\n  readonly rowSelection: Record<string, boolean>\n  readonly emptyState: EmptyStateConfig\n  readonly group?: GroupRenderConfig<TData>\n}\n\ntype DataTableRowProps<TData> = {\n  readonly row: Row<TData>\n  readonly isSelected: boolean\n  readonly isCollapsible?: boolean\n  readonly isOpen?: boolean\n}\n\nfunction DataTableRow<TData>({\n  row,\n  isSelected,\n  isCollapsible = false,\n  isOpen = true,\n}: DataTableRowProps<TData>) {\n  return (\n    <TableRow\n      data-selected={isSelected}\n      className={cn(isCollapsible && 'transition-colors', isCollapsible && !isOpen && 'border-b-0')}\n    >\n      {row.getVisibleCells().map((cell) => {\n        const content = cell.column.columnDef.cell && flexRender(cell.column.columnDef.cell, cell.getContext())\n\n        return (\n          <DataTableCell\n            key={cell.id}\n            columnId={cell.column.id}\n            isCollapsible={isCollapsible}\n            isOpen={isOpen}\n            style={{ width: cell.column.columnDef.size }}\n          >\n            {content}\n          </DataTableCell>\n        )\n      })}\n    </TableRow>\n  )\n}\n\nexport function DataTableBody<TData>({\n  table,\n  isLoading,\n  pageSize,\n  getRowId,\n  rowSelection,\n  emptyState,\n  group,\n}: DataTableBodyProps<TData>) {\n  if (isLoading) {\n    return (\n      <TableBody>\n        {Array.from({ length: pageSize }).map((_unused, index) => (\n          <TableRow key={`skeleton-row-${String(index)}`}>\n            {table\n              .getAllColumns()\n              .filter((column) => column.getIsVisible())\n              .map((column) => (\n                  <DataTableCell\n                    key={`skeleton-cell-${String(index)}-${column.id}`}\n                    columnId={column.id}\n                    style={{ width: column.columnDef.size }}\n                    className={\n                      column.id !== SELECT_COLUMN_ID && column.id !== ACTIONS_COLUMN_ID ? 'w-full' : undefined\n                    }\n                  >\n                    <Skeleton className={getSkeletonClassName(column.id)} />\n                  </DataTableCell>\n                ))}\n          </TableRow>\n        ))}\n      </TableBody>\n    )\n  }\n\n  const rows = table.getRowModel().rows\n\n  if (!rows.length) {\n    const visibleColumns = table.getAllColumns().filter((col) => col.getIsVisible())\n\n    return (\n      <TableBody>\n        <TableRow className=\"h-full\">\n          <TableCell colSpan={visibleColumns.length} className=\"h-full p-0\">\n            <div className=\"flex h-full w-full flex-col items-center justify-center\">\n              {emptyState.imageRoute && (\n                <img\n                  className={cn('mb-6 w-50 md:w-75', emptyState.imageClassName)}\n                  src={emptyState.imageRoute}\n                  alt={emptyState.imageAlt ?? 'No data available'}\n                />\n              )}\n              <Typography variant=\"title-md\" weight=\"semibold\" className=\"text-center\">\n                {emptyState.title}\n              </Typography>\n              <Typography variant=\"title-sm\" className=\"text-center opacity-80\">\n                {emptyState.description}\n              </Typography>\n            </div>\n          </TableCell>\n        </TableRow>\n      </TableBody>\n    )\n  }\n\n  const visibleColumnCount = table.getVisibleLeafColumns().length\n\n  return (\n    <TableBody>\n      {rows.map((row) => {\n        const rowId = getRowId(row.original)\n\n        if (group && row.getCanExpand()) {\n          const content = group.renderGroupRow?.(row) ?? `${String(row.getLeafRows().length)} items`\n          return (\n            <DataTableGroupRow\n              key={rowId}\n              colSpan={visibleColumnCount}\n              selector={group.renderGroupSelector ? <group.renderGroupSelector row={row} /> : undefined}\n              content={content}\n              isOpen={group.isGroupOpen(rowId)}\n              onToggle={() => group.toggleGroup(rowId)}\n            />\n          )\n        }\n\n        const isSelected = rowSelection[rowId] ?? false\n        const parentRow = group ? row.getParentRow() : undefined\n        return (\n          <DataTableRow\n            key={rowId}\n            row={row}\n            isSelected={isSelected}\n            isCollapsible={!!group}\n            isOpen={parentRow ? (group?.isGroupOpen(getRowId(parentRow.original)) ?? true) : true}\n          />\n        )\n      })}\n    </TableBody>\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/components/DataTable/components/DataTableToolbar.js

@@ -3,9 +3,9 @@ import { FunnelSimple } from '@phosphor-icons/react/dist/ssr/FunnelSimple';
 import { SelectionAll } from '@phosphor-icons/react/dist/ssr/SelectionAll';
 import { TextColumns } from '@phosphor-icons/react/dist/ssr/TextColumns';
 import { X } from '@phosphor-icons/react/dist/ssr/X';
-import { Badge } from '../../Badge/Badge.js';
 import { Button } from '../../Button/Button.js';
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem, DropdownMenuSeparator } from '../../DropdownMenu/DropdownMenu.js';
+import { NotificationBadge } from '../../NotificationBadge/NotificationBadge.js';
 import { PopoverRoot, PopoverTrigger, PopoverContent } from '../../Popover/Popover.js';
 import { Typography } from '../../Typography/Typography.js';
 import { TooltipProvider, TooltipRoot, TooltipTrigger, TooltipContent } from '../../Tooltip/Tooltip.js';
@@ -82,7 +82,7 @@ function DataTableToolbar({
         showFiltersButton && /* @__PURE__ */ jsxs(PopoverRoot, { children: [
           /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "text", size: "sm", StartIcon: FunnelSimple, className: "relative whitespace-nowrap", children: [
             showBadge && /* @__PURE__ */ jsx(
-              Badge,
+              NotificationBadge,
               {
                 count: activeFiltersCount,
                 color: "primary",

package/dist/components/DataTable/components/DataTableToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableToolbar.js","sources":["../../../../src/components/DataTable/components/DataTableToolbar.tsx"],"sourcesContent":["import { FunnelSimple } from '@phosphor-icons/react/dist/ssr/FunnelSimple'\nimport { SelectionAll } from '@phosphor-icons/react/dist/ssr/SelectionAll'\nimport { TextColumns } from '@phosphor-icons/react/dist/ssr/TextColumns'\nimport { X } from '@phosphor-icons/react/dist/ssr/X'\nimport { Table } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Badge } from '../../Badge'\nimport { Button } from '../../Button'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../../DropdownMenu'\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from '../../Popover'\nimport { Typography } from '../../Typography'\n\nimport { ColumnVisibilityConfig } from '@/components/DataTable/types'\nimport { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from '@/components/Tooltip'\nimport { useIsMobile } from '@/lib/useMobile'\nimport { cn } from '@/lib/utils'\n\ntype DataTableToolbarProps<TData> = {\n  readonly table: Table<TData>\n  readonly columnVisibility?: ColumnVisibilityConfig\n  readonly primaryFilters?: React.ReactNode\n  readonly secondaryFilters?: React.ReactNode\n  readonly activePrimaryFiltersCount?: number\n  readonly activeSecondaryFiltersCount?: number\n  readonly labels?: {\n    filters?: string\n    moreFilters?: string\n  }\n  readonly selection?: {\n    isSelectionStarted?: boolean\n    onSelectionStart?: () => void\n    onSelectionCancel?: () => void\n    selectionSummary?: string | null\n    isSelectionDisabled?: boolean\n    labels?: {\n      startSelection?: string\n      cancelSelection?: string\n      selectionSummary?: string\n      selectionDisabledTooltip?: string\n    }\n  }\n}\n\nconst defaultLabels = {\n  filters: 'Filters',\n  moreFilters: 'More filters',\n}\n\nconst defaultColumnVisibilityLabels = {\n  button: 'Hide columns',\n  selectAll: 'Select all',\n}\n\nconst defaultSelectionLabels = {\n  startSelection: 'Start selection',\n  cancelSelection: 'Cancel selection',\n}\n\nexport function DataTableToolbar<TData>({\n  table,\n  columnVisibility,\n  primaryFilters,\n  secondaryFilters,\n  activePrimaryFiltersCount = 0,\n  activeSecondaryFiltersCount = 0,\n  selection,\n  labels: labelsProp,\n}: DataTableToolbarProps<TData>) {\n  const isMobile = useIsMobile()\n\n  const labels = {\n    ...defaultLabels,\n    ...labelsProp,\n  }\n\n  const columnVisibilityLabels = {\n    ...defaultColumnVisibilityLabels,\n    ...columnVisibility?.labels,\n  }\n\n  const selectionLabels = {\n    ...defaultSelectionLabels,\n    ...selection?.labels,\n  }\n\n  const showColumnVisibilityControls = columnVisibility?.showControls ?? true\n\n  const hasPrimaryFilters = !!primaryFilters\n  const hasSecondaryFilters = !!secondaryFilters\n\n  const showFiltersButton = isMobile ? hasPrimaryFilters || hasSecondaryFilters : hasSecondaryFilters\n\n  const totalActiveFiltersCount = activePrimaryFiltersCount + activeSecondaryFiltersCount\n  const activeFiltersCount = isMobile ? totalActiveFiltersCount : activeSecondaryFiltersCount\n  const showBadge = activeFiltersCount > 0\n\n  const filtersButtonLabel = !hasPrimaryFilters || isMobile ? labels.filters : labels.moreFilters\n\n  if (!showColumnVisibilityControls && !primaryFilters && !secondaryFilters && !selection) {\n    return null\n  }\n\n  return (\n    <div className=\"flex shrink-0 flex-col gap-2 p-1\">\n      {!isMobile && primaryFilters && <div className=\"flex flex-wrap items-center gap-2\">{primaryFilters}</div>}\n\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex items-center gap-2\">\n          {selection && (\n            <div className=\"flex items-center gap-2\">\n              {selection.isSelectionStarted ? (\n                <>\n                  <Button variant=\"text\" size=\"sm\" StartIcon={X} onClick={selection.onSelectionCancel}>\n                    {selectionLabels.cancelSelection}\n                  </Button>\n                  {selection.selectionSummary && !isMobile && (\n                    <Typography variant=\"body-sm\" className=\"text-neutral-600\">\n                      {selection.selectionSummary}\n                    </Typography>\n                  )}\n                </>\n              ) : (\n                <TooltipProvider>\n                  <TooltipRoot delayDuration={200}>\n                    <TooltipTrigger asChild>\n                      <div>\n                        <Button\n                          variant=\"text\"\n                          size=\"sm\"\n                          StartIcon={SelectionAll}\n                          onClick={selection.onSelectionStart}\n                          disabled={selection.isSelectionDisabled}\n                        >\n                          {selectionLabels.startSelection}\n                        </Button>\n                      </div>\n                    </TooltipTrigger>\n                    {selection.labels?.selectionDisabledTooltip && selection.isSelectionDisabled && (\n                      <TooltipContent>{selection.labels.selectionDisabledTooltip}</TooltipContent>\n                    )}\n                  </TooltipRoot>\n                </TooltipProvider>\n              )}\n            </div>\n          )}\n        </div>\n\n        <div className=\"flex items-center gap-2\">\n          {showFiltersButton && (\n            <PopoverRoot>\n              <PopoverTrigger asChild>\n                <Button variant=\"text\" size=\"sm\" StartIcon={FunnelSimple} className=\"relative whitespace-nowrap\">\n                  {showBadge && (\n                    <Badge\n                      count={activeFiltersCount}\n                      color=\"primary\"\n                      ping={false}\n                      className=\"absolute -top-1 -right-1\"\n                    />\n                  )}\n                  {filtersButtonLabel}\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent\n                align=\"center\"\n                className={cn('w-fit p-4', isMobile && 'max-h-[80vh] w-[95vw] overflow-y-auto')}\n              >\n                <div className=\"flex flex-col gap-4\">\n                  {isMobile && primaryFilters}\n                  {secondaryFilters}\n                </div>\n              </PopoverContent>\n            </PopoverRoot>\n          )}\n          {showColumnVisibilityControls && (\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"text\" size=\"sm\" className={cn('whitespace-nowrap')} StartIcon={TextColumns}>\n                  {columnVisibilityLabels.button}\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent>\n                <DropdownMenuCheckboxItem\n                  key={'all-columns'}\n                  className=\"capitalize\"\n                  checked={table\n                    .getAllColumns()\n                    .filter((column) => column.getCanHide())\n                    .every((column) => column.getIsVisible())}\n                  onSelect={(event) => event.preventDefault()}\n                  onCheckedChange={(value) =>\n                    table\n                      .getAllColumns()\n                      .filter((column) => column.getCanHide())\n                      .forEach((column) => column.toggleVisibility(!!value))\n                  }\n                >\n                  {columnVisibilityLabels.selectAll}\n                </DropdownMenuCheckboxItem>\n                <DropdownMenuSeparator className=\"bg-neutral-100\" />\n                {table\n                  .getAllColumns()\n                  .filter((column) => column.getCanHide())\n                  .map((column) => {\n                    return (\n                      <DropdownMenuCheckboxItem\n                        key={column.id}\n                        className=\"capitalize\"\n                        checked={column.getIsVisible()}\n                        onSelect={(event) => event.preventDefault()}\n                        onCheckedChange={(value) => column.toggleVisibility(!!value)}\n                      >\n                        {column.columnDef.header?.toString()}\n                      </DropdownMenuCheckboxItem>\n                    )\n                  })}\n              </DropdownMenuContent>\n            </DropdownMenu>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DataTableToolbar.js","sources":["../../../../src/components/DataTable/components/DataTableToolbar.tsx"],"sourcesContent":["import { FunnelSimple } from '@phosphor-icons/react/dist/ssr/FunnelSimple'\nimport { SelectionAll } from '@phosphor-icons/react/dist/ssr/SelectionAll'\nimport { TextColumns } from '@phosphor-icons/react/dist/ssr/TextColumns'\nimport { X } from '@phosphor-icons/react/dist/ssr/X'\nimport { Table } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Button } from '../../Button'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../../DropdownMenu'\nimport { NotificationBadge } from '../../NotificationBadge'\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from '../../Popover'\nimport { Typography } from '../../Typography'\n\nimport { ColumnVisibilityConfig } from '@/components/DataTable/types'\nimport { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from '@/components/Tooltip'\nimport { useIsMobile } from '@/lib/useMobile'\nimport { cn } from '@/lib/utils'\n\ntype DataTableToolbarProps<TData> = {\n  readonly table: Table<TData>\n  readonly columnVisibility?: ColumnVisibilityConfig\n  readonly primaryFilters?: React.ReactNode\n  readonly secondaryFilters?: React.ReactNode\n  readonly activePrimaryFiltersCount?: number\n  readonly activeSecondaryFiltersCount?: number\n  readonly labels?: {\n    filters?: string\n    moreFilters?: string\n  }\n  readonly selection?: {\n    isSelectionStarted?: boolean\n    onSelectionStart?: () => void\n    onSelectionCancel?: () => void\n    selectionSummary?: string | null\n    isSelectionDisabled?: boolean\n    labels?: {\n      startSelection?: string\n      cancelSelection?: string\n      selectionSummary?: string\n      selectionDisabledTooltip?: string\n    }\n  }\n}\n\nconst defaultLabels = {\n  filters: 'Filters',\n  moreFilters: 'More filters',\n}\n\nconst defaultColumnVisibilityLabels = {\n  button: 'Hide columns',\n  selectAll: 'Select all',\n}\n\nconst defaultSelectionLabels = {\n  startSelection: 'Start selection',\n  cancelSelection: 'Cancel selection',\n}\n\nexport function DataTableToolbar<TData>({\n  table,\n  columnVisibility,\n  primaryFilters,\n  secondaryFilters,\n  activePrimaryFiltersCount = 0,\n  activeSecondaryFiltersCount = 0,\n  selection,\n  labels: labelsProp,\n}: DataTableToolbarProps<TData>) {\n  const isMobile = useIsMobile()\n\n  const labels = {\n    ...defaultLabels,\n    ...labelsProp,\n  }\n\n  const columnVisibilityLabels = {\n    ...defaultColumnVisibilityLabels,\n    ...columnVisibility?.labels,\n  }\n\n  const selectionLabels = {\n    ...defaultSelectionLabels,\n    ...selection?.labels,\n  }\n\n  const showColumnVisibilityControls = columnVisibility?.showControls ?? true\n\n  const hasPrimaryFilters = !!primaryFilters\n  const hasSecondaryFilters = !!secondaryFilters\n\n  const showFiltersButton = isMobile ? hasPrimaryFilters || hasSecondaryFilters : hasSecondaryFilters\n\n  const totalActiveFiltersCount = activePrimaryFiltersCount + activeSecondaryFiltersCount\n  const activeFiltersCount = isMobile ? totalActiveFiltersCount : activeSecondaryFiltersCount\n  const showBadge = activeFiltersCount > 0\n\n  const filtersButtonLabel = !hasPrimaryFilters || isMobile ? labels.filters : labels.moreFilters\n\n  if (!showColumnVisibilityControls && !primaryFilters && !secondaryFilters && !selection) {\n    return null\n  }\n\n  return (\n    <div className=\"flex shrink-0 flex-col gap-2 p-1\">\n      {!isMobile && primaryFilters && <div className=\"flex flex-wrap items-center gap-2\">{primaryFilters}</div>}\n\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex items-center gap-2\">\n          {selection && (\n            <div className=\"flex items-center gap-2\">\n              {selection.isSelectionStarted ? (\n                <>\n                  <Button variant=\"text\" size=\"sm\" StartIcon={X} onClick={selection.onSelectionCancel}>\n                    {selectionLabels.cancelSelection}\n                  </Button>\n                  {selection.selectionSummary && !isMobile && (\n                    <Typography variant=\"body-sm\" className=\"text-neutral-600\">\n                      {selection.selectionSummary}\n                    </Typography>\n                  )}\n                </>\n              ) : (\n                <TooltipProvider>\n                  <TooltipRoot delayDuration={200}>\n                    <TooltipTrigger asChild>\n                      <div>\n                        <Button\n                          variant=\"text\"\n                          size=\"sm\"\n                          StartIcon={SelectionAll}\n                          onClick={selection.onSelectionStart}\n                          disabled={selection.isSelectionDisabled}\n                        >\n                          {selectionLabels.startSelection}\n                        </Button>\n                      </div>\n                    </TooltipTrigger>\n                    {selection.labels?.selectionDisabledTooltip && selection.isSelectionDisabled && (\n                      <TooltipContent>{selection.labels.selectionDisabledTooltip}</TooltipContent>\n                    )}\n                  </TooltipRoot>\n                </TooltipProvider>\n              )}\n            </div>\n          )}\n        </div>\n\n        <div className=\"flex items-center gap-2\">\n          {showFiltersButton && (\n            <PopoverRoot>\n              <PopoverTrigger asChild>\n                <Button variant=\"text\" size=\"sm\" StartIcon={FunnelSimple} className=\"relative whitespace-nowrap\">\n                  {showBadge && (\n                    <NotificationBadge\n                      count={activeFiltersCount}\n                      color=\"primary\"\n                      ping={false}\n                      className=\"absolute -top-1 -right-1\"\n                    />\n                  )}\n                  {filtersButtonLabel}\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent\n                align=\"center\"\n                className={cn('w-fit p-4', isMobile && 'max-h-[80vh] w-[95vw] overflow-y-auto')}\n              >\n                <div className=\"flex flex-col gap-4\">\n                  {isMobile && primaryFilters}\n                  {secondaryFilters}\n                </div>\n              </PopoverContent>\n            </PopoverRoot>\n          )}\n          {showColumnVisibilityControls && (\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"text\" size=\"sm\" className={cn('whitespace-nowrap')} StartIcon={TextColumns}>\n                  {columnVisibilityLabels.button}\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent>\n                <DropdownMenuCheckboxItem\n                  key={'all-columns'}\n                  className=\"capitalize\"\n                  checked={table\n                    .getAllColumns()\n                    .filter((column) => column.getCanHide())\n                    .every((column) => column.getIsVisible())}\n                  onSelect={(event) => event.preventDefault()}\n                  onCheckedChange={(value) =>\n                    table\n                      .getAllColumns()\n                      .filter((column) => column.getCanHide())\n                      .forEach((column) => column.toggleVisibility(!!value))\n                  }\n                >\n                  {columnVisibilityLabels.selectAll}\n                </DropdownMenuCheckboxItem>\n                <DropdownMenuSeparator className=\"bg-neutral-100\" />\n                {table\n                  .getAllColumns()\n                  .filter((column) => column.getCanHide())\n                  .map((column) => {\n                    return (\n                      <DropdownMenuCheckboxItem\n                        key={column.id}\n                        className=\"capitalize\"\n                        checked={column.getIsVisible()}\n                        onSelect={(event) => event.preventDefault()}\n                        onCheckedChange={(value) => column.toggleVisibility(!!value)}\n                      >\n                        {column.columnDef.header?.toString()}\n                      </DropdownMenuCheckboxItem>\n                    )\n                  })}\n              </DropdownMenuContent>\n            </DropdownMenu>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Form/Form.d.ts

@@ -25,7 +25,7 @@ declare const FormMessage: React.ForwardRefExoticComponent<{
     asChild?: boolean;
 } & React.BaseHTMLAttributes<HTMLParagraphElement> & import('class-variance-authority').VariantProps<(props?: ({
     variant?: "display-lg" | "display-md" | "display-sm" | "headline-lg" | "headline-md" | "headline-sm" | "title-lg" | "title-md" | "title-sm" | "label-lg" | "label-md" | "label-sm" | "body-lg" | "body-md" | "body-sm" | null | undefined;
-    weight?: "bold" | "regular" | "medium" | "semibold" | null | undefined;
+    weight?: "bold" | "medium" | "regular" | "semibold" | null | undefined;
     family?: "onest" | null | undefined;
     color?: "primary" | "accent" | "success" | "warning" | "error" | "neutral" | "inverse" | "secondary" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string> & React.RefAttributes<HTMLParagraphElement>>;

package/dist/components/NotificationBadge/NotificationBadge.d.ts

@@ -0,0 +1,84 @@
+import * as React from 'react';
+declare const notificationBadgeVariants: (props?: ({
+    color?: "primary" | "accent" | "success" | "warning" | "error" | "neutral" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    position?: "top-right" | "top-left" | "bottom-right" | "bottom-left" | null | undefined;
+    numeric?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type NotificationBadgeProps = {
+    /**
+     * Controls the visibility of the pulsing animation effect
+     * @default true
+     */
+    ping?: boolean;
+    /**
+     * The color variant of the badge
+     * @default 'accent'
+     */
+    color?: 'neutral' | 'accent' | 'primary' | 'success' | 'warning' | 'error';
+    /**
+     * The size of the badge
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * The position of the badge relative to its container
+     * @default 'top-right'
+     */
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+    /**
+     * The number to display in the badge
+     */
+    count?: number;
+} & React.HTMLAttributes<HTMLElement>;
+/**
+ * A dot or counter positioned absolutely over an icon or avatar, used to
+ * show a notification, status, or draw attention to an element.
+ *
+ * @example
+ * ```tsx
+ * // Simple notification badge
+ * <div className="relative">
+ *   <Bell className="h-6 w-6" />
+ *   <NotificationBadge color="error" />
+ * </div>
+ *
+ * // Custom size and position
+ * <div className="relative">
+ *   <Avatar />
+ *   <NotificationBadge
+ *     color="success"
+ *     size="sm"
+ *     position="bottom-right"
+ *     ping={false}
+ *   />
+ * </div>
+ * ```
+ */
+declare const NotificationBadge: React.ForwardRefExoticComponent<{
+    /**
+     * Controls the visibility of the pulsing animation effect
+     * @default true
+     */
+    ping?: boolean;
+    /**
+     * The color variant of the badge
+     * @default 'accent'
+     */
+    color?: "neutral" | "accent" | "primary" | "success" | "warning" | "error";
+    /**
+     * The size of the badge
+     * @default 'md'
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * The position of the badge relative to its container
+     * @default 'top-right'
+     */
+    position?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
+    /**
+     * The number to display in the badge
+     */
+    count?: number;
+} & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLSpanElement>>;
+export { NotificationBadge, notificationBadgeVariants };

package/dist/components/NotificationBadge/NotificationBadge.js

@@ -0,0 +1,85 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { cn } from '../../lib/utils.js';
+
+const notificationBadgeVariants = cva("rounded-full", {
+  variants: {
+    color: {
+      neutral: "bg-neutral text-neutral-foreground",
+      accent: "bg-accent text-accent-foreground",
+      primary: "bg-primary text-primary-foreground",
+      success: "bg-success text-success-foreground  ",
+      warning: "bg-warning text-warning-foreground",
+      error: "bg-error text-error-foreground"
+    },
+    size: {
+      sm: "h-2 w-2",
+      md: "h-3 w-3",
+      lg: "h-4 w-4"
+    },
+    position: {
+      "top-right": "right-0 top-0",
+      "top-left": "left-0 top-0",
+      "bottom-right": "right-0 bottom-0",
+      "bottom-left": "left-0 bottom-0"
+    },
+    numeric: {
+      true: "min-w-[16px] h-4 px-1 flex items-center justify-center text-[10px] font-medium",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    color: "primary",
+    size: "md",
+    position: "top-right",
+    numeric: false
+  }
+});
+const NotificationBadge = React.forwardRef(
+  ({ className, color = "accent", size = "md", position = "top-right", ping = true, count, ...props }, ref) => {
+    const sizeClasses = {
+      sm: "h-2 w-2",
+      md: "h-3 w-3",
+      lg: "h-4 w-4"
+    }[size || "md"];
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          "absolute flex",
+          notificationBadgeVariants({ color, position, numeric: !!count }),
+          !count && sizeClasses,
+          className
+        ),
+        ref,
+        ...props,
+        children: [
+          ping && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                notificationBadgeVariants({ color }),
+                "absolute inline-flex h-full w-full animate-ping opacity-75"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                notificationBadgeVariants({ color }),
+                "relative inline-flex h-full w-full items-center justify-center"
+              ),
+              children: count
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+NotificationBadge.displayName = "NotificationBadge";
+
+export { NotificationBadge, notificationBadgeVariants };
+//# sourceMappingURL=NotificationBadge.js.map

package/dist/components/NotificationBadge/NotificationBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationBadge.js","sources":["../../../src/components/NotificationBadge/NotificationBadge.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { cn } from '../../lib/utils'\n\nconst notificationBadgeVariants = cva('rounded-full', {\n  variants: {\n    color: {\n      neutral: 'bg-neutral text-neutral-foreground',\n      accent: 'bg-accent text-accent-foreground',\n      primary: 'bg-primary text-primary-foreground',\n      success: 'bg-success text-success-foreground  ',\n      warning: 'bg-warning text-warning-foreground',\n      error: 'bg-error text-error-foreground',\n    },\n    size: {\n      sm: 'h-2 w-2',\n      md: 'h-3 w-3',\n      lg: 'h-4 w-4',\n    },\n    position: {\n      'top-right': 'right-0 top-0',\n      'top-left': 'left-0 top-0',\n      'bottom-right': 'right-0 bottom-0',\n      'bottom-left': 'left-0 bottom-0',\n    },\n    numeric: {\n      true: 'min-w-[16px] h-4 px-1 flex items-center justify-center text-[10px] font-medium',\n      false: '',\n    },\n  },\n  defaultVariants: {\n    color: 'primary',\n    size: 'md',\n    position: 'top-right',\n    numeric: false,\n  },\n})\n\nexport type NotificationBadgeProps = {\n  /**\n   * Controls the visibility of the pulsing animation effect\n   * @default true\n   */\n  ping?: boolean\n\n  /**\n   * The color variant of the badge\n   * @default 'accent'\n   */\n  color?: 'neutral' | 'accent' | 'primary' | 'success' | 'warning' | 'error'\n\n  /**\n   * The size of the badge\n   * @default 'md'\n   */\n  size?: 'sm' | 'md' | 'lg'\n\n  /**\n   * The position of the badge relative to its container\n   * @default 'top-right'\n   */\n  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'\n\n  /**\n   * The number to display in the badge\n   */\n  count?: number\n} & React.HTMLAttributes<HTMLElement>\n\n/**\n * A dot or counter positioned absolutely over an icon or avatar, used to\n * show a notification, status, or draw attention to an element.\n *\n * @example\n * ```tsx\n * // Simple notification badge\n * <div className=\"relative\">\n *   <Bell className=\"h-6 w-6\" />\n *   <NotificationBadge color=\"error\" />\n * </div>\n *\n * // Custom size and position\n * <div className=\"relative\">\n *   <Avatar />\n *   <NotificationBadge\n *     color=\"success\"\n *     size=\"sm\"\n *     position=\"bottom-right\"\n *     ping={false}\n *   />\n * </div>\n * ```\n */\nconst NotificationBadge = React.forwardRef<HTMLSpanElement, NotificationBadgeProps>(\n  ({ className, color = 'accent', size = 'md', position = 'top-right', ping = true, count, ...props }, ref) => {\n    const sizeClasses = {\n      sm: 'h-2 w-2',\n      md: 'h-3 w-3',\n      lg: 'h-4 w-4',\n    }[size || 'md']\n\n    return (\n      <span\n        className={cn(\n          'absolute flex',\n          notificationBadgeVariants({ color, position, numeric: !!count }),\n          !count && sizeClasses,\n          className,\n        )}\n        ref={ref}\n        {...props}\n      >\n        {ping && (\n          <span\n            className={cn(\n              notificationBadgeVariants({ color }),\n              'absolute inline-flex h-full w-full animate-ping opacity-75',\n            )}\n          />\n        )}\n        <span\n          className={cn(\n            notificationBadgeVariants({ color }),\n            'relative inline-flex h-full w-full items-center justify-center',\n          )}\n        >\n          {count}\n        </span>\n      </span>\n    )\n  },\n)\n\nNotificationBadge.displayName = 'NotificationBadge'\n\nexport { NotificationBadge, notificationBadgeVariants }\n"],"names":[],"mappings":";;;;;AAKA,MAAM,yBAAA,GAA4B,IAAI,cAAA,EAAgB;AAAA,EACpD,QAAA,EAAU;AAAA,IACR,KAAA,EAAO;AAAA,MACL,OAAA,EAAS,oCAAA;AAAA,MACT,MAAA,EAAQ,kCAAA;AAAA,MACR,OAAA,EAAS,oCAAA;AAAA,MACT,OAAA,EAAS,sCAAA;AAAA,MACT,OAAA,EAAS,oCAAA;AAAA,MACT,KAAA,EAAO;AAAA,KACT;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,SAAA;AAAA,MACJ,EAAA,EAAI,SAAA;AAAA,MACJ,EAAA,EAAI;AAAA,KACN;AAAA,IACA,QAAA,EAAU;AAAA,MACR,WAAA,EAAa,eAAA;AAAA,MACb,UAAA,EAAY,cAAA;AAAA,MACZ,cAAA,EAAgB,kBAAA;AAAA,MAChB,aAAA,EAAe;AAAA,KACjB;AAAA,IACA,OAAA,EAAS;AAAA,MACP,IAAA,EAAM,gFAAA;AAAA,MACN,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,KAAA,EAAO,SAAA;AAAA,IACP,IAAA,EAAM,IAAA;AAAA,IACN,QAAA,EAAU,WAAA;AAAA,IACV,OAAA,EAAS;AAAA;AAEb,CAAC;AAyDD,MAAM,oBAAoB,KAAA,CAAM,UAAA;AAAA,EAC9B,CAAC,EAAE,SAAA,EAAW,KAAA,GAAQ,UAAU,IAAA,GAAO,IAAA,EAAM,QAAA,GAAW,WAAA,EAAa,OAAO,IAAA,EAAM,KAAA,EAAO,GAAG,KAAA,IAAS,GAAA,KAAQ;AAC3G,IAAA,MAAM,WAAA,GAAc;AAAA,MAClB,EAAA,EAAI,SAAA;AAAA,MACJ,EAAA,EAAI,SAAA;AAAA,MACJ,EAAA,EAAI;AAAA,KACN,CAAE,QAAQ,IAAI,CAAA;AAEd,IAAA,uBACE,IAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,eAAA;AAAA,UACA,yBAAA,CAA0B,EAAE,KAAA,EAAO,QAAA,EAAU,SAAS,CAAC,CAAC,OAAO,CAAA;AAAA,UAC/D,CAAC,KAAA,IAAS,WAAA;AAAA,UACV;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,IAAA,oBACC,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,EAAA;AAAA,gBACT,yBAAA,CAA0B,EAAE,KAAA,EAAO,CAAA;AAAA,gBACnC;AAAA;AACF;AAAA,WACF;AAAA,0BAEF,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,EAAA;AAAA,gBACT,yBAAA,CAA0B,EAAE,KAAA,EAAO,CAAA;AAAA,gBACnC;AAAA,eACF;AAAA,cAEC,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,iBAAA,CAAkB,WAAA,GAAc,mBAAA;;;;"}

package/dist/components/NotificationBadge/index.d.ts

@@ -0,0 +1 @@
+export * from './NotificationBadge';

package/dist/components/NotificationBadge/index.js

@@ -0,0 +1,2 @@
+export { NotificationBadge, notificationBadgeVariants } from './NotificationBadge.js';
+//# sourceMappingURL=index.js.map

package/dist/components/NotificationBadge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/PhoneInput/PhoneInput.d.ts

@@ -1,58 +1,42 @@
-import { PhoneCountry } from './countries';
+import { PhoneCountry, PhoneInputCountryAccessors, PhoneValue } from './types';
 import * as React from 'react';
-export type PhoneInputCountryAccessors<T> = {
-    /** Returns the unique key used to identify a country in the selector. */
-    getCountryValue: (country: T) => string;
-    /** Returns the E.164 dial code, including the leading "+", e.g. "+34". */
-    getCountryDialCode: (country: T) => string;
-    /** Returns the flag emoji (or any other leading glyph) for a country. */
-    getCountryFlag: (country: T) => string;
-    /** Returns the display name used for search and the option list. */
-    getCountryName: (country: T) => string;
-};
-/** Props unrelated to the country shape, shared by both usage modes. */
 type PhoneInputBaseProps = {
-    /** Id applied to the number input, so a `<label htmlFor>` / `FormControl` targets it. */
+    /** Lands on the number input, so `<label htmlFor>` targets it. */
     id?: string;
-    /** Name applied to the number input. */
     name?: string;
-    /** Classes for the outer wrapper. */
     className?: string;
-    /** Classes for the country selector trigger button. */
-    prefixClassName?: string;
-    /** Classes for the number `<input>` element. */
-    numberClassName?: string;
     disabled?: boolean;
-    error?: boolean | string;
-    /** Selected country, expressed as `getCountryValue(country)`. */
+    error?: boolean;
+    inputRef?: React.Ref<HTMLInputElement>;
+    /** Controlled when set, otherwise seeded by `defaultCountry`. */
     country?: string;
-    /** Digits value of the number field. */
+    /** National digits, no country code or separators. */
     number?: string;
-    onNumberChange?: (number: string) => void;
-    /** Extra attributes forwarded to the number `<input>`. */
-    numberInputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id' | 'name' | 'disabled' | 'value' | 'onChange' | 'className'>;
-    /** Placeholder for the number field. */
+    onChange?: (value: PhoneValue) => void;
+    /** ISO code, used when `country` is uncontrolled. */
+    defaultCountry?: string;
+    /** ISO codes pinned above the list, in order. */
+    priorityCountries?: Array<string>;
+    numberInputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id' | 'name' | 'disabled' | 'value' | 'onChange' | 'onKeyDown' | 'className'>;
+    /** Defaults to the country's example number. */
     placeholder?: string;
-    /** Accessible label for the country selector trigger (announced by screen readers; not visible). */
     countryAriaLabel?: string;
-    /** Placeholder for the country search field. */
     searchPlaceholder?: string;
-    /** Message shown when no country matches the search. */
     emptyMessage?: string;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'id' | 'onChange'>;
-/** Default mode: use the built-in `PhoneCountry` list. Accessors are optional (sensible defaults applied). */
-export type PhoneInputDefaultProps = PhoneInputBaseProps & Partial<PhoneInputCountryAccessors<PhoneCountry>> & {
-    /** Country list backing the prefix selector. Defaults to `defaultCountries`. */
-    countries?: Array<PhoneCountry>;
-    /** Fires with the full selected country object, so callers can persist whichever fields they need. */
-    onCountryChange?: (country: PhoneCountry) => void;
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean;
+};
+type ResolvedPhoneInputProps<T extends object> = PhoneInputBaseProps & Partial<PhoneInputCountryAccessors<T>> & {
+    /** Defaults to the generated list. */
+    countries?: Array<T>;
+    /** Names the generated list. Ignored when `countries` is passed. */
+    locale?: string;
+    onChange?: (value: PhoneValue<T>) => void;
 };
-/** Custom mode: bring your own country shape. `countries` and all accessors are required. */
+export type PhoneInputDefaultProps = ResolvedPhoneInputProps<PhoneCountry>;
 export type PhoneInputCustomProps<T extends object> = PhoneInputBaseProps & PhoneInputCountryAccessors<T> & {
-    /** Backend-driven / custom country list. */
     countries: Array<T>;
-    /** Fires with the full selected country object, so callers can persist whichever fields they need. */
-    onCountryChange?: (country: T) => void;
+    onChange?: (value: PhoneValue<T>) => void;
 };
 export type PhoneInputProps<T extends object = PhoneCountry> = PhoneInputDefaultProps | PhoneInputCustomProps<T>;
 export declare function PhoneInput(props: PhoneInputDefaultProps): React.ReactElement;