@vygruppen/spor-react 9.4.1 → 9.5.0

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.mts CHANGED
@@ -1978,6 +1978,29 @@ type WizardNudgeProps = Omit<NudgeProps, "actions" | "content"> & {
1978
1978
  */
1979
1979
  declare const WizardNudge: ({ children, name, onClose, content, ...props }: WizardNudgeProps) => React.JSX.Element;
1980
1980
 
1981
+ type PaginationProps = {
1982
+ /** Specify the total amount of pages */
1983
+ totalPages: number;
1984
+ /** Specify the currently selected page */
1985
+ selectedPage: number;
1986
+ /** Callback for when a page is clicked */
1987
+ onPageChange: (selected: number) => void;
1988
+ };
1989
+ /**
1990
+ * A pagination component is used to navigate between multiple pages.
1991
+ *
1992
+ * You specify the total amount of pages and the currently selected page.
1993
+ *
1994
+ * ```tsx
1995
+ * <Pagination
1996
+ * totalPages={10}
1997
+ * selectedPage={3}
1998
+ * onPageChange={handlePageChange}
1999
+ * />
2000
+ * ```
2001
+ **/
2002
+ declare const Pagination: ({ totalPages, selectedPage, onPageChange, }: PaginationProps) => React.JSX.Element;
2003
+
1981
2004
  type ProgressIndicatorProps = {
1982
2005
  numberOfSteps: number;
1983
2006
  activeStep: number;
@@ -3804,14 +3827,6 @@ declare const theme: {
3804
3827
  [x: string]: string;
3805
3828
  };
3806
3829
  calendarPopover: {
3807
- boxShadow: string;
3808
- outlineWidth: string;
3809
- outlineColor: string;
3810
- outlineStyle: string;
3811
- outlineOffset: string;
3812
- color: string;
3813
- backgroundColor: string;
3814
- } | {
3815
3830
  boxShadow: string;
3816
3831
  outline: string;
3817
3832
  outlineColor: string;
@@ -5467,6 +5482,89 @@ declare const theme: {
5467
5482
  } | undefined;
5468
5483
  parts: ("button" | "input" | "text" | "container")[];
5469
5484
  };
5485
+ Pagination: {
5486
+ baseStyle?: ((props: any) => {
5487
+ activeButton: {
5488
+ _hover: {
5489
+ borderRadius: number;
5490
+ backgroundColor: string;
5491
+ };
5492
+ _active: {
5493
+ backgroundColor: string;
5494
+ borderRadius: number;
5495
+ };
5496
+ backgroundColor: string;
5497
+ display: string;
5498
+ alignItems: string;
5499
+ justifyContent: string;
5500
+ width: number;
5501
+ height: number;
5502
+ backgroundImage: string;
5503
+ borderRadius: number;
5504
+ fontSize: string;
5505
+ fontWeight: string;
5506
+ };
5507
+ disabled: {
5508
+ color: string;
5509
+ cursor: string;
5510
+ pointerEvents: string;
5511
+ boxShadow: string;
5512
+ display: string;
5513
+ alignItems: string;
5514
+ justifyContent: string;
5515
+ width: number;
5516
+ height: number;
5517
+ backgroundImage: string;
5518
+ borderRadius: number;
5519
+ fontSize: string;
5520
+ };
5521
+ listItem: {
5522
+ display: string;
5523
+ };
5524
+ link: {
5525
+ _hover: {
5526
+ borderRadius: number;
5527
+ _disabled: {
5528
+ color: string;
5529
+ };
5530
+ backgroundColor: string;
5531
+ };
5532
+ _active: {
5533
+ backgroundColor: string;
5534
+ borderRadius: number;
5535
+ };
5536
+ color: string;
5537
+ backgroundColor: string;
5538
+ display: string;
5539
+ alignItems: string;
5540
+ justifyContent: string;
5541
+ width: number;
5542
+ height: number;
5543
+ backgroundImage: string;
5544
+ borderRadius: number;
5545
+ fontSize: string;
5546
+ };
5547
+ icon: {
5548
+ bottom: string;
5549
+ };
5550
+ }) | undefined;
5551
+ sizes?: {
5552
+ [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
5553
+ keys: ("link" | "icon" | "disabled" | "listItem" | "activeButton")[];
5554
+ }>;
5555
+ } | undefined;
5556
+ variants?: {
5557
+ [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
5558
+ keys: ("link" | "icon" | "disabled" | "listItem" | "activeButton")[];
5559
+ }>;
5560
+ } | undefined;
5561
+ defaultProps?: {
5562
+ size?: string | number | undefined;
5563
+ variant?: string | number | undefined;
5564
+ colorScheme?: string | undefined;
5565
+ } | undefined;
5566
+ parts: ("link" | "icon" | "disabled" | "listItem" | "activeButton")[];
5567
+ };
5470
5568
  Popover: {
5471
5569
  baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
5472
5570
  popper: {
@@ -8942,4 +9040,4 @@ declare const Text: _chakra_ui_system_dist_system_types.ComponentWithAs<"p", Tex
8942
9040
  **/
8943
9041
  declare function slugify(text: string | string[], maxLength?: number): string;
8944
9042
 
8945
- export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, CardSelect, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, FullScreenDrawer, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, Nudge, NudgeProps, NumericStepper, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SimpleDrawer, SimpleDrawerProps, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, StaticCard, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, Tooltip, TooltipProps, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoProps, WizardNudge, WizardNudgeProps, brandTheme, createTexts, fontFaces, slugify, theme, useToast, useTranslation };
9043
+ export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, CardSelect, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, FullScreenDrawer, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, Nudge, NudgeProps, NumericStepper, Pagination, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SimpleDrawer, SimpleDrawerProps, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, StaticCard, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, Tooltip, TooltipProps, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoProps, WizardNudge, WizardNudgeProps, brandTheme, createTexts, fontFaces, slugify, theme, useToast, useTranslation };
package/dist/index.d.ts CHANGED
@@ -1978,6 +1978,29 @@ type WizardNudgeProps = Omit<NudgeProps, "actions" | "content"> & {
1978
1978
  */
1979
1979
  declare const WizardNudge: ({ children, name, onClose, content, ...props }: WizardNudgeProps) => React.JSX.Element;
1980
1980
 
1981
+ type PaginationProps = {
1982
+ /** Specify the total amount of pages */
1983
+ totalPages: number;
1984
+ /** Specify the currently selected page */
1985
+ selectedPage: number;
1986
+ /** Callback for when a page is clicked */
1987
+ onPageChange: (selected: number) => void;
1988
+ };
1989
+ /**
1990
+ * A pagination component is used to navigate between multiple pages.
1991
+ *
1992
+ * You specify the total amount of pages and the currently selected page.
1993
+ *
1994
+ * ```tsx
1995
+ * <Pagination
1996
+ * totalPages={10}
1997
+ * selectedPage={3}
1998
+ * onPageChange={handlePageChange}
1999
+ * />
2000
+ * ```
2001
+ **/
2002
+ declare const Pagination: ({ totalPages, selectedPage, onPageChange, }: PaginationProps) => React.JSX.Element;
2003
+
1981
2004
  type ProgressIndicatorProps = {
1982
2005
  numberOfSteps: number;
1983
2006
  activeStep: number;
@@ -3804,14 +3827,6 @@ declare const theme: {
3804
3827
  [x: string]: string;
3805
3828
  };
3806
3829
  calendarPopover: {
3807
- boxShadow: string;
3808
- outlineWidth: string;
3809
- outlineColor: string;
3810
- outlineStyle: string;
3811
- outlineOffset: string;
3812
- color: string;
3813
- backgroundColor: string;
3814
- } | {
3815
3830
  boxShadow: string;
3816
3831
  outline: string;
3817
3832
  outlineColor: string;
@@ -5467,6 +5482,89 @@ declare const theme: {
5467
5482
  } | undefined;
5468
5483
  parts: ("button" | "input" | "text" | "container")[];
5469
5484
  };
5485
+ Pagination: {
5486
+ baseStyle?: ((props: any) => {
5487
+ activeButton: {
5488
+ _hover: {
5489
+ borderRadius: number;
5490
+ backgroundColor: string;
5491
+ };
5492
+ _active: {
5493
+ backgroundColor: string;
5494
+ borderRadius: number;
5495
+ };
5496
+ backgroundColor: string;
5497
+ display: string;
5498
+ alignItems: string;
5499
+ justifyContent: string;
5500
+ width: number;
5501
+ height: number;
5502
+ backgroundImage: string;
5503
+ borderRadius: number;
5504
+ fontSize: string;
5505
+ fontWeight: string;
5506
+ };
5507
+ disabled: {
5508
+ color: string;
5509
+ cursor: string;
5510
+ pointerEvents: string;
5511
+ boxShadow: string;
5512
+ display: string;
5513
+ alignItems: string;
5514
+ justifyContent: string;
5515
+ width: number;
5516
+ height: number;
5517
+ backgroundImage: string;
5518
+ borderRadius: number;
5519
+ fontSize: string;
5520
+ };
5521
+ listItem: {
5522
+ display: string;
5523
+ };
5524
+ link: {
5525
+ _hover: {
5526
+ borderRadius: number;
5527
+ _disabled: {
5528
+ color: string;
5529
+ };
5530
+ backgroundColor: string;
5531
+ };
5532
+ _active: {
5533
+ backgroundColor: string;
5534
+ borderRadius: number;
5535
+ };
5536
+ color: string;
5537
+ backgroundColor: string;
5538
+ display: string;
5539
+ alignItems: string;
5540
+ justifyContent: string;
5541
+ width: number;
5542
+ height: number;
5543
+ backgroundImage: string;
5544
+ borderRadius: number;
5545
+ fontSize: string;
5546
+ };
5547
+ icon: {
5548
+ bottom: string;
5549
+ };
5550
+ }) | undefined;
5551
+ sizes?: {
5552
+ [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
5553
+ keys: ("link" | "icon" | "disabled" | "listItem" | "activeButton")[];
5554
+ }>;
5555
+ } | undefined;
5556
+ variants?: {
5557
+ [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
5558
+ keys: ("link" | "icon" | "disabled" | "listItem" | "activeButton")[];
5559
+ }>;
5560
+ } | undefined;
5561
+ defaultProps?: {
5562
+ size?: string | number | undefined;
5563
+ variant?: string | number | undefined;
5564
+ colorScheme?: string | undefined;
5565
+ } | undefined;
5566
+ parts: ("link" | "icon" | "disabled" | "listItem" | "activeButton")[];
5567
+ };
5470
5568
  Popover: {
5471
5569
  baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
5472
5570
  popper: {
@@ -8942,4 +9040,4 @@ declare const Text: _chakra_ui_system_dist_system_types.ComponentWithAs<"p", Tex
8942
9040
  **/
8943
9041
  declare function slugify(text: string | string[], maxLength?: number): string;
8944
9042
 
8945
- export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, CardSelect, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, FullScreenDrawer, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, Nudge, NudgeProps, NumericStepper, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SimpleDrawer, SimpleDrawerProps, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, StaticCard, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, Tooltip, TooltipProps, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoProps, WizardNudge, WizardNudgeProps, brandTheme, createTexts, fontFaces, slugify, theme, useToast, useTranslation };
9043
+ export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, CardSelect, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, FullScreenDrawer, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, Nudge, NudgeProps, NumericStepper, Pagination, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SimpleDrawer, SimpleDrawerProps, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, StaticCard, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, Tooltip, TooltipProps, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoProps, WizardNudge, WizardNudgeProps, brandTheme, createTexts, fontFaces, slugify, theme, useToast, useTranslation };