@dub/ui 0.2.56 → 0.2.57

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -8,7 +8,7 @@ import Autoplay from 'embla-carousel-autoplay';
8
8
  import useEmblaCarousel, { UseEmblaCarouselType } from 'embla-carousel-react';
9
9
  import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
10
10
  import { Icon, GlobePointer, SatelliteDish, Flag6, InputSearch, Page2, Gift, DubLinksIcon, Raycast, Typescript, LifeRing, Twitter } from './icons/index.js';
11
- export { Africa, Airtm, Amazon, AndroidLogo, AppleLogo, ArrowBoldUp, ArrowRight, ArrowTrendUp, ArrowTurnLeft, ArrowTurnRight2, ArrowUpRight, ArrowsOppositeDirectionX, ArrowsOppositeDirectionY, Asia, BadgeCheck, BadgeCheck2Fill, Blog, Bolt, BoltFill, Book2, Book2Fill, Book2Small, BookOpen, Books2, BoxArchive, BracketsCurly, BriefcaseFill, Brush, BulletList, BulletListFill, Calculator, Calendar6, CalendarDays, CalendarIcon, CalendarRefresh, CardAmex, CardDiscover, CardMastercard, CardVisa, Cards, CaretUpFill, CashApp, ChartActivity2, ChartArea2, ChartLine, ChatGPT, Check, Check2, CheckboxCheckedFill, CheckboxUnchecked, ChevronLeft, ChevronRight, CircleCheck, CircleCheckFill, CircleDollar, CircleDotted, CircleHalfDottedCheck, CircleHalfDottedClock, CircleInfo, CirclePercentage, CirclePlay, CirclePlayFill, CircleQuestion, CircleUser, CircleWarning, CircleXmark, Circles, Circles3, CloudUpload, Code, ColorPalette2, ConnectedDots, ConnectedDots4, ConnectedDotsFill, Connections3, Copy, CreditCard, Crosshairs3, Crown, CrownSmall, Cube, CubeSettings, CubeSettingsFill, CurrencyDollar, CursorRays, DatabaseKey, Desktop, DiamondTurnRight, DiamondTurnRightFill, Directions, Discount, Dots, Download, DubAnalyticsIcon, DubApiIcon, DubCraftedShield, DubLinksIcon, DubPartnersIcon, Duplicate, Earth, EarthPosition, Envelope, EnvelopeAlert, EnvelopeArrowRight, EnvelopeFill, Europe, ExpandingArrow, Eye, EyeSlash, Facebook, FeatherFill, Figma, FileContent, FileZip2, Filter2, FilterBars, Flag2, Flag6, FlagWavy, Flask, FlaskSmall, Folder, Folder5, FolderBookmark, FolderLock, FolderPlus, FolderShield, GamingConsole, Gauge6, Gear, Gear2, Gear3, Gem, Gift, GiftFill, GitHubEnhanced, Github, Globe, Globe2, GlobePointer, GlobeSearch, Go, Google, GoogleEnhanced, GreekTemple, GridIcon, GridLayoutRows, GridPlus, GripDotsVertical, Headset, HeartFill, HexadecagonStar, History, Hyperlink, Icon, Icosahedron, Incognito, InfinityIcon, InputField, InputPassword, InputPasswordPointer, InputSearch, Instagram, InvoiceDollar, Key, LayoutSidebar, License, LifeRing, LinesY, Link4, LinkBroken, LinkedIn, LoadingCircle, LoadingDots, LoadingSpinner, LocationPin, Lock, LockFill, Magic, Magnifier, MapPosition, MarkdownIcon, MarketingTarget, MatrixLines, Menu3, MessageSmile, MicrophoneFill, Minus, MobilePhone, MoneyBill, MoneyBill2, MoneyBills2, Msgs, NorthAmerica, Note, NucleoPhoto, Oceania, OfficeBuilding, PLAN_FEATURE_ICONS, Page2, Paintbrush, Palette2, PaperPlane, Payoneer, Paypal, Pen2, PenWriting, PercentageArrowDown, Photo, Php, Plug2, Plus, Plus2, Post, Prisma, ProductHunt, Pyramid, Python, QRCode, Raycast, Receipt2, ReferredVia, Refresh2, Robot, Ruby, SatelliteDish, ScanText, Scribble, ShieldAlert, ShieldCheck, ShieldKeyhole, ShieldSlash, ShieldUser, Shuffle, Slack, Sliders, SortOrder, SouthAmerica, Sparkle3, Spotify, SquareChart, SquareLayoutGrid5, SquareLayoutGrid6, SquareUserSparkle2, SquareXmark, Stars2, Stripe, StripeLink, Success, TV, TableIcon, TableRows2, Tablet, Tag, Tags, Tick, TikTok, Timer2, Tinybird, Toggle2Fill, Toggles, Trash, TriangleWarning, Twitter, Typescript, UiCard, Unsplash, User, UserCheck, UserCrown, UserDelete, UserFocus, UserPlus, UserXmark, Users, Users2, Users6, UsersFill, UsersSettings, Venmo, Versions2, Views, Watch, Webhook, Window, WindowSearch, WindowSettings, Xmark, YouTube } from './icons/index.js';
11
+ export { Africa, Airtm, Amazon, AndroidLogo, AppleLogo, ArrowBoldUp, ArrowRight, ArrowTrendUp, ArrowTurnLeft, ArrowTurnRight2, ArrowUpRight, ArrowUpRight2, ArrowsOppositeDirectionX, ArrowsOppositeDirectionY, Asia, BadgeCheck, BadgeCheck2Fill, Bell, Blog, Bolt, BoltFill, Book2, Book2Fill, Book2Small, BookOpen, Books2, BoxArchive, BracketsCurly, BriefcaseFill, Brush, BulletList, BulletListFill, Calculator, Calendar6, CalendarDays, CalendarIcon, CalendarRefresh, CardAmex, CardDiscover, CardMastercard, CardVisa, Cards, CaretUpFill, CashApp, ChartActivity2, ChartArea2, ChartLine, ChatGPT, Check, Check2, CheckboxCheckedFill, CheckboxUnchecked, ChevronLeft, ChevronRight, CircleCheck, CircleCheckFill, CircleDollar, CircleDotted, CircleHalfDottedCheck, CircleHalfDottedClock, CircleInfo, CirclePercentage, CirclePlay, CirclePlayFill, CircleQuestion, CircleUser, CircleWarning, CircleXmark, Circles, Circles3, CloudUpload, Code, ColorPalette2, ConnectedDots, ConnectedDots4, ConnectedDotsFill, Connections3, Copy, CreditCard, Crosshairs3, Crown, CrownSmall, Cube, CubeSettings, CubeSettingsFill, CurrencyDollar, CursorRays, DatabaseKey, Desktop, DiamondTurnRight, DiamondTurnRightFill, Directions, Discount, Dots, Download, DubAnalyticsIcon, DubApiIcon, DubCraftedShield, DubLinksIcon, DubPartnersIcon, Duplicate, Earth, EarthPosition, Envelope, EnvelopeAlert, EnvelopeArrowRight, EnvelopeFill, Europe, ExpandingArrow, Eye, EyeSlash, Facebook, FeatherFill, Figma, FileContent, FileZip2, Filter2, FilterBars, Flag2, Flag6, FlagWavy, Flask, FlaskSmall, Folder, Folder5, FolderBookmark, FolderLock, FolderPlus, FolderShield, GamingConsole, Gauge6, Gear, Gear2, Gear3, Gem, Gift, GiftFill, GitHubEnhanced, Github, Globe, Globe2, GlobePointer, GlobeSearch, Go, Google, GoogleEnhanced, GreekTemple, GridIcon, GridLayoutRows, GridPlus, GripDotsVertical, Headset, HeartFill, HexadecagonStar, History, Hyperlink, Icon, Icosahedron, Incognito, InfinityIcon, InputField, InputPassword, InputPasswordPointer, InputSearch, Instagram, InvoiceDollar, Key, LayoutSidebar, License, LifeRing, LinesY, Link4, LinkBroken, LinkedIn, LoadingCircle, LoadingDots, LoadingSpinner, LocationPin, Lock, LockFill, Magic, Magnifier, MapPosition, MarkdownIcon, MarketingTarget, MatrixLines, Menu3, MessageSmile, MicrophoneFill, Minus, MobilePhone, MoneyBill, MoneyBill2, MoneyBills2, Msgs, NorthAmerica, Note, NucleoPhoto, Oceania, OfficeBuilding, PLAN_FEATURE_ICONS, Page2, Paintbrush, Palette2, PaperPlane, Payoneer, Paypal, Pen2, PenWriting, PercentageArrowDown, Photo, Php, Plug2, Plus, Plus2, Post, Prisma, ProductHunt, Pyramid, Python, QRCode, Raycast, Receipt2, ReferredVia, Refresh2, Robot, Ruby, SatelliteDish, ScanText, Scribble, ShieldAlert, ShieldCheck, ShieldKeyhole, ShieldSlash, ShieldUser, Shuffle, Slack, Sliders, SortOrder, SouthAmerica, Sparkle3, Spotify, SquareChart, SquareLayoutGrid5, SquareLayoutGrid6, SquareUserSparkle2, SquareXmark, Stars2, Stripe, StripeLink, Success, TV, TableIcon, TableRows2, Tablet, Tag, Tags, Tick, TikTok, Timer2, Tinybird, Toggle2Fill, Toggles, Trash, TriangleWarning, Twitter, Typescript, UiCard, Unsplash, User, UserCheck, UserCrown, UserDelete, UserFocus, UserMinus, UserPlus, UserXmark, Users, Users2, Users6, UsersFill, UsersSettings, Venmo, Versions2, Views, Watch, Webhook, Window, WindowSearch, WindowSettings, Xmark, YouTube } from './icons/index.js';
12
12
  import * as PopoverPrimitive from '@radix-ui/react-popover';
13
13
  import { DayPickerSingleProps, DayPickerRangeProps, Matcher } from 'react-day-picker';
14
14
  export { Matcher } from 'react-day-picker';
@@ -186,7 +186,8 @@ type ComboboxOption<TMeta = any> = {
186
186
  type ComboboxProps<TMultiple extends boolean | undefined, TMeta extends any> = PropsWithChildren<{
187
187
  multiple?: TMultiple;
188
188
  selected: TMultiple extends true ? ComboboxOption<TMeta>[] : ComboboxOption<TMeta> | null;
189
- setSelected: TMultiple extends true ? (options: ComboboxOption<TMeta>[]) => void : (option: ComboboxOption<TMeta> | null) => void;
189
+ setSelected?: TMultiple extends true ? (options: ComboboxOption<TMeta>[]) => void : (option: ComboboxOption<TMeta> | null) => void;
190
+ onSelect?: (option: ComboboxOption<TMeta>) => void;
190
191
  options?: ComboboxOption<TMeta>[];
191
192
  icon?: Icon | ReactNode;
192
193
  placeholder?: ReactNode;
@@ -209,7 +210,7 @@ type ComboboxProps<TMultiple extends boolean | undefined, TMeta extends any> = P
209
210
  matchTriggerWidth?: boolean;
210
211
  hideSearch?: boolean;
211
212
  }>;
212
- declare function Combobox({ multiple, selected: selectedProp, setSelected, options, icon: Icon, placeholder, searchPlaceholder, emptyState, createLabel, onCreate, buttonProps, shortcutHint, caret, side, open, onOpenChange, onSearchChange, shouldFilter, inputRight, inputClassName, optionRight, optionClassName, matchTriggerWidth, hideSearch, children, }: ComboboxProps<boolean | undefined, any>): react_jsx_runtime.JSX.Element;
213
+ declare function Combobox({ multiple, selected: selectedProp, setSelected, onSelect, options, icon: Icon, placeholder, searchPlaceholder, emptyState, createLabel, onCreate, buttonProps, shortcutHint, caret, side, open, onOpenChange, onSearchChange, shouldFilter, inputRight, inputClassName, optionRight, optionClassName, matchTriggerWidth, hideSearch, children, }: ComboboxProps<boolean | undefined, any>): react_jsx_runtime.JSX.Element;
213
214
 
214
215
  type OmitKeys<T, K extends keyof T> = {
215
216
  [P in keyof T as P extends K ? never : P]: T[P];
@@ -523,6 +524,21 @@ declare function Modal({ children, className, showModal, setShowModal, onClose,
523
524
  drawerRootProps?: ComponentProps<typeof Drawer.Root>;
524
525
  }): react_jsx_runtime.JSX.Element;
525
526
 
527
+ type NumberStepperProps = {
528
+ value: number;
529
+ onChange: (value: number) => void;
530
+ min?: number;
531
+ max?: number;
532
+ step?: number;
533
+ disabled?: boolean;
534
+ className?: string;
535
+ id?: string;
536
+ formatValue?: (value: number) => ReactNode;
537
+ decrementAriaLabel?: string;
538
+ incrementAriaLabel?: string;
539
+ } & Omit<HTMLAttributes<HTMLDivElement>, "onChange">;
540
+ declare function NumberStepper({ value, onChange, min, max, step, disabled, className, id, formatValue, decrementAriaLabel, incrementAriaLabel, ...rest }: NumberStepperProps): react_jsx_runtime.JSX.Element;
541
+
526
542
  declare function PaginationControls({ pagination, setPagination, totalCount, unit, className, children, showTotalCount, }: PropsWithChildren<{
527
543
  pagination: PaginationState$1;
528
544
  setPagination: (pagination: PaginationState$1) => void;
@@ -548,10 +564,11 @@ declare const Sheet: typeof SheetRoot & {
548
564
  Close: typeof Close;
549
565
  };
550
566
 
551
- declare function ShimmerDots({ dotSize, cellSize, speed, className, }: {
567
+ declare function ShimmerDots({ dotSize, cellSize, speed, color, className, }: {
552
568
  dotSize?: number;
553
569
  cellSize?: number;
554
570
  speed?: number;
571
+ color?: [number, number, number];
555
572
  className?: string;
556
573
  }): react_jsx_runtime.JSX.Element;
557
574
 
@@ -635,8 +652,9 @@ type BaseTableProps<T> = {
635
652
  className?: string;
636
653
  containerClassName?: string;
637
654
  scrollWrapperClassName?: string;
655
+ emptyWrapperClassName?: string;
638
656
  thClassName?: string | ((columnId: string) => string);
639
- tdClassName?: string | ((columnId: string) => string);
657
+ tdClassName?: string | ((columnId: string, row: Row<T>) => string);
640
658
  };
641
659
  type UseTableProps<T> = BaseTableProps<T> & ({
642
660
  pagination?: PaginationState$1;
@@ -660,7 +678,7 @@ type TableProps<T> = BaseTableProps<T> & PropsWithChildren<{
660
678
  declare function useTable<T extends any>(props: UseTableProps<T>): TableProps<T> & {
661
679
  table: Table$1<T>;
662
680
  };
663
- declare function Table<T>({ data, loading, error, emptyState, cellRight, sortBy, sortOrder, onSortChange, sortableColumns, className, containerClassName, scrollWrapperClassName, thClassName, tdClassName, table, pagination, resourceName, onRowClick, onRowSelectionChange, selectionControls, rowProps, rowCount, children, enableColumnResizing, }: TableProps<T>): react_jsx_runtime.JSX.Element;
681
+ declare function Table<T>({ data, loading, error, emptyState, cellRight, sortBy, sortOrder, onSortChange, sortableColumns, className, containerClassName, scrollWrapperClassName, emptyWrapperClassName, thClassName, tdClassName, table, pagination, resourceName, onRowClick, onRowSelectionChange, selectionControls, rowProps, rowCount, children, enableColumnResizing, }: TableProps<T>): react_jsx_runtime.JSX.Element;
664
682
 
665
683
  declare function useTablePagination({ pageSize, page, onPageChange, }: {
666
684
  pageSize: number;
@@ -781,6 +799,20 @@ declare function UTMBuilder({ values, onChange, disabled, autoFocus, disabledToo
781
799
  className?: string;
782
800
  }): react_jsx_runtime.JSX.Element;
783
801
 
802
+ type SingleTableConfig = {
803
+ all: string[];
804
+ defaultVisible: string[];
805
+ };
806
+ type MultiTableConfig<T extends string> = Record<T, SingleTableConfig>;
807
+ declare function useColumnVisibility<T extends SingleTableConfig>(storageKey: string, config: T): {
808
+ columnVisibility: VisibilityState;
809
+ setColumnVisibility: (visibility: VisibilityState) => void;
810
+ };
811
+ declare function useColumnVisibility<T extends string>(storageKey: string, config: MultiTableConfig<T>): {
812
+ columnVisibility: Record<T, VisibilityState>;
813
+ setColumnVisibility: (tab: T, visibility: VisibilityState) => void;
814
+ };
815
+
784
816
  declare function useCookies<T>(key: string, initialValue: T, opts?: Cookies.CookieAttributes): [T, (value: T) => void];
785
817
 
786
818
  declare const useCopyToClipboard: (timeout?: number) => [boolean, (value: string | ClipboardItem, options?: {
@@ -1388,4 +1420,4 @@ declare function Wordmark({ className }: {
1388
1420
  className?: string;
1389
1421
  }): react_jsx_runtime.JSX.Element;
1390
1422
 
1391
- export { AUTOPLAY_DEFAULT_DELAY, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedLinkFeaturesTooltip, Alert, AlertDescription, AlertTitle, AnimatedSizeContainer, AuthButton, Avatar, Background, Badge, BadgeTooltip, BlurImage, Button, ButtonProps, ButtonTooltip, COMPARE_PAGES, CUSTOMER_STORIES, Calendar, CardList, Carousel, CarouselApi, CarouselContent, CarouselItem, CarouselNavBar, CarouselNext, CarouselPrevious, CarouselThumbnail, CarouselThumbnails, Checkbox, ClientOnly, Combobox, ComboboxOption, ComboboxProps, CompositeLogo, CopyButton, CopyText, DatePickerContext, DateRangePicker, DotsPattern, DubStatusBadge, DynamicTooltipWrapper, EditColumnsButton, EmptyState, EmptyStateProps, FEATURES_LIST, FileUpload, FileUploadProps, Filter, Footer, Form, Grid, IconMenu, InfoTooltip, InlineSnippet, Input, InputProps, InputSelect, InputSelectItemProps, KeyboardShortcutContext, KeyboardShortcutProvider, LEGAL_PAGES, Label, LinkLogo, LinkPreview, LinkPreviewPlaceholder, LinkifyTooltipContent, Logo, MaxWidthWrapper, MenuItem, MiniAreaChart, MiniAreaChartProps, Modal, Nav, NavContext, NavItemChild, NavItemChildren, NavMobile, NavTheme, NavWordmark, NumberTooltip, PaginationControls, PaginationState, Popover, PopoverProps, Popup, PopupContext, ProgressBar, RESOURCES, RadioGroup, RadioGroupItem, SDKS, SOCIAL_LINKS, SOLUTIONS, Sheet, ShimmerDots, SimpleTooltipContent, Slider, SmartDateTimePicker, StatusBadge, Switch, TabSelect, Table, ToggleGroup, TokenAvatar, Tooltip, TooltipContent, TooltipProps, TooltipProvider, UTMBuilder, UTM_PARAMETERS, Wordmark, badgeVariants, buttonVariants, getUserAvatarUrl, navItems, statusBadgeVariants, useCarousel, useCarouselActiveIndex, useCookies, useCopyToClipboard, useCurrentAnchor, useEnterSubmit, useInViewport, useInputFocused, useIntersectionObserver, useKeyboardShortcut, useLocalStorage, useMediaQuery, useOptimisticUpdate, usePagination, useRemoveGAParams, useResizeObserver, useRouterStuff, useScroll, useScrollProgress, useTable, useTablePagination, useToastWithUndo };
1423
+ export { AUTOPLAY_DEFAULT_DELAY, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedLinkFeaturesTooltip, Alert, AlertDescription, AlertTitle, AnimatedSizeContainer, AuthButton, Avatar, Background, Badge, BadgeTooltip, BlurImage, Button, ButtonProps, ButtonTooltip, COMPARE_PAGES, CUSTOMER_STORIES, Calendar, CardList, Carousel, CarouselApi, CarouselContent, CarouselItem, CarouselNavBar, CarouselNext, CarouselPrevious, CarouselThumbnail, CarouselThumbnails, Checkbox, ClientOnly, Combobox, ComboboxOption, ComboboxProps, CompositeLogo, CopyButton, CopyText, DatePickerContext, DateRangePicker, DotsPattern, DubStatusBadge, DynamicTooltipWrapper, EditColumnsButton, EmptyState, EmptyStateProps, FEATURES_LIST, FileUpload, FileUploadProps, Filter, Footer, Form, Grid, IconMenu, InfoTooltip, InlineSnippet, Input, InputProps, InputSelect, InputSelectItemProps, KeyboardShortcutContext, KeyboardShortcutProvider, LEGAL_PAGES, Label, LinkLogo, LinkPreview, LinkPreviewPlaceholder, LinkifyTooltipContent, Logo, MaxWidthWrapper, MenuItem, MiniAreaChart, MiniAreaChartProps, Modal, Nav, NavContext, NavItemChild, NavItemChildren, NavMobile, NavTheme, NavWordmark, NumberStepper, NumberStepperProps, NumberTooltip, PaginationControls, PaginationState, Popover, PopoverProps, Popup, PopupContext, ProgressBar, RESOURCES, RadioGroup, RadioGroupItem, SDKS, SOCIAL_LINKS, SOLUTIONS, Sheet, ShimmerDots, SimpleTooltipContent, Slider, SmartDateTimePicker, StatusBadge, Switch, TabSelect, Table, ToggleGroup, TokenAvatar, Tooltip, TooltipContent, TooltipProps, TooltipProvider, UTMBuilder, UTM_PARAMETERS, Wordmark, badgeVariants, buttonVariants, getUserAvatarUrl, navItems, statusBadgeVariants, useCarousel, useCarouselActiveIndex, useColumnVisibility, useCookies, useCopyToClipboard, useCurrentAnchor, useEnterSubmit, useInViewport, useInputFocused, useIntersectionObserver, useKeyboardShortcut, useLocalStorage, useMediaQuery, useOptimisticUpdate, usePagination, useRemoveGAParams, useResizeObserver, useRouterStuff, useScroll, useScrollProgress, useTable, useTablePagination, useToastWithUndo };