@vygruppen/spor-react 9.6.1 → 9.6.3

package/dist/index.d.mts

@@ -464,6 +464,42 @@ declare const Card: _chakra_ui_system_dist_system_types.ComponentWithAs<As, Card
  */
 declare const StaticCard: ({ colorScheme, ...props }: any) => React.JSX.Element;
 
+type PressableCardProps = Omit<BoxProps, "as"> & {
+    variant: "floating" | "accent" | "base";
+    size?: "sm" | "lg";
+    as: "button" | "a" | "label";
+};
+/**
+ * Renders a Pressable card.
+ *
+ * The most basic version looks like this:
+ *
+ * ```tsx
+ * <PressableCard>
+ *   Content
+ * </PressableCard>
+ * ```
+ *
+ * There are lots of color schemes available. You can also set the size as either `sm` or `lg`. The default is `sm`.
+ *
+ * ```tsx
+ * <PressableCard colorScheme="orange" size="lg">
+ *   A smaller card
+ * </PressableCard>
+ * ```
+ *
+ * Pressable cards can also be rendered as button, link or label – like a li (list item) or an article.
+ * You do this by specifying the `as` prop. If no `as` is specified, button is chosen as default:
+ *
+ *
+ * ```tsx
+ * <PressableCard colorScheme="green" as="section">
+ *   This is now a <section /> element
+ * </PressableCard>
+ * ```
+ */
+declare const PressableCard: ({ children, as, size, variant, ...props }: PressableCardProps) => React.JSX.Element;
+
 /**
  * A date picker component.
  *
@@ -6357,15 +6393,19 @@ declare const theme: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
                 table: {
                     width: string;
+                    minWidth: string;
                     color: string;
                     borderCollapse: string;
                 };
                 th: {
                     fontWeight: string;
                     textAlign: string;
+                    verticalAlign: string;
+                    minWidth: string;
                 };
                 td: {
                     textAlign: string;
+                    verticalAlign: string;
                 };
                 tfoot: {
                     tr: {
@@ -6942,6 +6982,15 @@ declare const theme: {
                 display: string;
                 borderRadius: string;
                 color: string;
+            } | {
+                color: string;
+                backgroundColor: string;
+                appearance: string;
+                border: string;
+                overflow: string;
+                fontSize: string;
+                display: string;
+                borderRadius: string;
             }) | undefined;
             sizes?: {
                 [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
@@ -6955,6 +7004,654 @@ declare const theme: {
                 colorScheme?: string | undefined;
             } | undefined;
         };
+        PressableCard: {
+            baseStyle?: ((props: any) => {
+                _hover: {
+                    outline: string;
+                    outlineColor: string;
+                    backgroundColor: string;
+                } | {
+                    _hover: {
+                        backgroundColor: string;
+                    };
+                    _active: {
+                        backgroundColor: string;
+                    };
+                    color: string;
+                    backgroundColor: string;
+                };
+                _disabled: {
+                    pointerEvents: string;
+                    color: string;
+                    outlineWidth: string;
+                    outlineColor: string;
+                    outlineStyle: string;
+                    outlineOffset: string;
+                    backgroundColor: string;
+                } | {
+                    pointerEvents: string;
+                    color: string;
+                    outline: string;
+                    outlineColor: string;
+                    backgroundColor: string;
+                };
+                outline: string;
+                outlineColor: string;
+                backgroundColor: string;
+                _focusVisible: {
+                    outlineWidth: string;
+                    outlineColor: string;
+                    outlineStyle: string;
+                    outlineOffset: string;
+                };
+                color: string;
+                outlineWidth: string;
+                outlineStyle: string;
+                outlineOffset: string;
+                appearance: string;
+                border: string;
+                overflow: string;
+                fontSize: string;
+                display: string;
+                borderRadius: string;
+            } | {
+                _hover: {
+                    outline: string;
+                    outlineColor: string;
+                    backgroundColor: string;
+                } | {
+                    _hover: {
+                        backgroundColor: string;
+                    };
+                    _active: {
+                        backgroundColor: string;
+                    };
+                    color: string;
+                    backgroundColor: string;
+                };
+                _disabled: {
+                    pointerEvents: string;
+                    color: string;
+                    outlineWidth: string;
+                    outlineColor: string;
+                    outlineStyle: string;
+                    outlineOffset: string;
+                    backgroundColor: string;
+                } | {
+                    pointerEvents: string;
+                    color: string;
+                    outline: string;
+                    outlineColor: string;
+                    backgroundColor: string;
+                };
+                _active: {
+                    backgroundColor: string;
+                };
+                color: string;
+                backgroundColor: string;
+                _focusVisible: {
+                    outlineWidth: string;
+                    outlineColor: string;
+                    outlineStyle: string;
+                    outlineOffset: string;
+                };
+                outline: string;
+                outlineColor: string;
+                outlineWidth: string;
+                outlineStyle: string;
+                outlineOffset: string;
+                appearance: string;
+                border: string;
+                overflow: string;
+                fontSize: string;
+                display: string;
+                borderRadius: string;
+            } | {
+                _hover: {
+                    outline: string;
+                    outlineColor: string;
+                    backgroundColor: string;
+                } | {
+                    _hover: {
+                        backgroundColor: string;
+                    };
+                    _active: {
+                        backgroundColor: string;
+                    };
+                    color: string;
+                    backgroundColor: string;
+                };
+                _disabled: {
+                    pointerEvents: string;
+                    color: string;
+                    outlineWidth: string;
+                    outlineColor: string;
+                    outlineStyle: string;
+                    outlineOffset: string;
+                    backgroundColor: string;
+                } | {
+                    pointerEvents: string;
+                    color: string;
+                    outline: string;
+                    outlineColor: string;
+                    backgroundColor: string;
+                };
+                outline: string;
+                outlineColor: string;
+                backgroundColor: string;
+                _focusVisible: {
+                    outlineWidth: string;
+                    outlineColor: string;
+                    outlineStyle: string;
+                    outlineOffset: string;
+                };
+                _active: {
+                    backgroundColor: string;
+                };
+                color: string;
+                outlineWidth: string;
+                outlineStyle: string;
+                outlineOffset: string;
+                appearance: string;
+                border: string;
+                overflow: string;
+                fontSize: string;
+                display: string;
+                borderRadius: string;
+            } | {
+                _hover: {
+                    outline: string;
+                    outlineColor: string;
+                    backgroundColor: string;
+                } | {
+                    _hover: {
+                        backgroundColor: string;
+                    };
+                    _active: {
+                        backgroundColor: string;
+                    };
+                    color: string;
+                    backgroundColor: string;
+                };
+                _disabled: {
+                    pointerEvents: string;
+                    color: string;
+                    outlineWidth: string;
+                    outlineColor: string;
+                    outlineStyle: string;
+                    outlineOffset: string;
+                    backgroundColor: string;
+                } | {
+                    pointerEvents: string;
+                    color: string;
+                    outline: string;
+                    outlineColor: string;
+                    backgroundColor: string;
+                };
+                _active: {
+                    backgroundColor: string;
+                };
+                color: string;
+                backgroundColor: string;
+                _focusVisible: {
+                    outlineWidth: string;
+                    outlineColor: string;
+                    outlineStyle: string;
+                    outlineOffset: string;
+                };
+                outlineWidth: string;
+                outlineColor: string;
+                outlineStyle: string;
+                outlineOffset: string;
+                appearance: string;
+                border: string;
+                overflow: string;
+                fontSize: string;
+                display: string;
+                borderRadius: string;
+            } | {
+                _hover: {
+                    outline: string;
+                    outlineColor: string;
+                    backgroundColor: string;
+                } | {
+                    _hover: {
+                        backgroundColor: string;
+                    };
+                    _active: {
+                        backgroundColor: string;
+                    };
+                    color: string;
+                    backgroundColor: string;
+                };
+                _disabled: {
+                    pointerEvents: string;
+                    color: string;
+                    outlineWidth: string;
+                    outlineColor: string;
+                    outlineStyle: string;
+                    outlineOffset: string;
+                    backgroundColor: string;
+                } | {
+                    pointerEvents: string;
+                    color: string;
+                    outline: string;
+                    outlineColor: string;
+                    backgroundColor: string;
+                };
+                outline: string;
+                outlineColor: string;
+                backgroundColor: string;
+                _focusVisible: {
+                    outlineWidth: string;
+                    outlineColor: string;
+                    outlineStyle: string;
+                    outlineOffset: string;
+                };
+                color: string;
+                appearance: string;
+                border: string;
+                overflow: string;
+                fontSize: string;
+                display: string;
+                borderRadius: string;
+            } | {
+                _hover: {
+                    outline: string;
+                    outlineColor: string;
+                    backgroundColor: string;
+                } | {
+                    _hover: {
+                        backgroundColor: string;
+                    };
+                    _active: {
+                        backgroundColor: string;
+                    };
+                    color: string;
+                    backgroundColor: string;
+                };
+                _disabled: {
+                    pointerEvents: string;
+                    color: string;
+                    outlineWidth: string;
+                    outlineColor: string;
+                    outlineStyle: string;
+                    outlineOffset: string;
+                    backgroundColor: string;
+                } | {
+                    pointerEvents: string;
+                    color: string;
+                    outline: string;
+                    outlineColor: string;
+                    backgroundColor: string;
+                };
+                _active: {
+                    backgroundColor: string;
+                };
+                color: string;
+                backgroundColor: string;
+                _focusVisible: {
+                    outlineWidth: string;
+                    outlineColor: string;
+                    outlineStyle: string;
+                    outlineOffset: string;
+                };
+                outline: string;
+                outlineColor: string;
+                appearance: string;
+                border: string;
+                overflow: string;
+                fontSize: string;
+                display: string;
+                borderRadius: string;
+            } | {
+                _hover: {
+                    outline: string;
+                    outlineColor: string;
+                    backgroundColor: string;
+                } | {
+                    _hover: {
+                        backgroundColor: string;
+                    };
+                    _active: {
+                        backgroundColor: string;
+                    };
+                    color: string;
+                    backgroundColor: string;
+                };
+                _disabled: {
+                    pointerEvents: string;
+                    color: string;
+                    outlineWidth: string;
+                    outlineColor: string;
+                    outlineStyle: string;
+                    outlineOffset: string;
+                    backgroundColor: string;
+                } | {
+                    pointerEvents: string;
+                    color: string;
+                    outline: string;
+                    outlineColor: string;
+                    backgroundColor: string;
+                };
+                outline: string;
+                outlineColor: string;
+                backgroundColor: string;
+                _focusVisible: {
+                    outlineWidth: string;
+                    outlineColor: string;
+                    outlineStyle: string;
+                    outlineOffset: string;
+                };
+                _active: {
+                    backgroundColor: string;
+                };
+                color: string;
+                appearance: string;
+                border: string;
+                overflow: string;
+                fontSize: string;
+                display: string;
+                borderRadius: string;
+            } | {
+                _hover: {
+                    outline: string;
+                    outlineColor: string;
+                    backgroundColor: string;
+                } | {
+                    _hover: {
+                        backgroundColor: string;
+                    };
+                    _active: {
+                        backgroundColor: string;
+                    };
+                    color: string;
+                    backgroundColor: string;
+                };
+                _disabled: {
+                    pointerEvents: string;
+                    color: string;
+                    outlineWidth: string;
+                    outlineColor: string;
+                    outlineStyle: string;
+                    outlineOffset: string;
+                    backgroundColor: string;
+                } | {
+                    pointerEvents: string;
+                    color: string;
+                    outline: string;
+                    outlineColor: string;
+                    backgroundColor: string;
+                };
+                _active: {
+                    backgroundColor: string;
+                };
+                color: string;
+                backgroundColor: string;
+                _focusVisible: {
+                    outlineWidth: string;
+                    outlineColor: string;
+                    outlineStyle: string;
+                    outlineOffset: string;
+                };
+                outline: string;
+                outlineColor: string;
+                appearance: string;
+                border: string;
+                overflow: string;
+                fontSize: string;
+                display: string;
+                borderRadius: string;
+            } | {
+                _hover: {
+                    outline: string;
+                    outlineColor: string;
+                    backgroundColor: string;
+                } | {
+                    _hover: {
+                        backgroundColor: string;
+                    };
+                    _active: {
+                        backgroundColor: string;
+                    };
+                    color: string;
+                    backgroundColor: string;
+                };
+                _disabled: {
+                    pointerEvents: string;
+                    color: string;
+                    outlineWidth: string;
+                    outlineColor: string;
+                    outlineStyle: string;
+                    outlineOffset: string;
+                    backgroundColor: string;
+                } | {
+                    pointerEvents: string;
+                    color: string;
+                    outline: string;
+                    outlineColor: string;
+                    backgroundColor: string;
+                };
+                outline: string;
+                outlineColor: string;
+                backgroundColor: string;
+                _focusVisible: {
+                    outlineWidth: string;
+                    outlineColor: string;
+                    outlineStyle: string;
+                    outlineOffset: string;
+                };
+                _active: {
+                    backgroundColor: string;
+                };
+                color: string;
+                appearance: string;
+                border: string;
+                overflow: string;
+                fontSize: string;
+                display: string;
+                borderRadius: string;
+            } | {
+                _hover: {
+                    outline: string;
+                    outlineColor: string;
+                    backgroundColor: string;
+                } | {
+                    _hover: {
+                        backgroundColor: string;
+                    };
+                    _active: {
+                        backgroundColor: string;
+                    };
+                    color: string;
+                    backgroundColor: string;
+                };
+                _disabled: {
+                    pointerEvents: string;
+                    color: string;
+                    outlineWidth: string;
+                    outlineColor: string;
+                    outlineStyle: string;
+                    outlineOffset: string;
+                    backgroundColor: string;
+                } | {
+                    pointerEvents: string;
+                    color: string;
+                    outline: string;
+                    outlineColor: string;
+                    backgroundColor: string;
+                };
+                _active: {
+                    backgroundColor: string;
+                };
+                color: string;
+                backgroundColor: string;
+                _focusVisible: {
+                    outlineWidth: string;
+                    outlineColor: string;
+                    outlineStyle: string;
+                    outlineOffset: string;
+                };
+                outline: string;
+                outlineColor: string;
+                appearance: string;
+                border: string;
+                overflow: string;
+                fontSize: string;
+                display: string;
+                borderRadius: string;
+            } | {
+                _hover: {
+                    outline: string;
+                    outlineColor: string;
+                    backgroundColor: string;
+                } | {
+                    _hover: {
+                        backgroundColor: string;
+                    };
+                    _active: {
+                        backgroundColor: string;
+                    };
+                    color: string;
+                    backgroundColor: string;
+                };
+                _disabled: {
+                    pointerEvents: string;
+                    color: string;
+                    outlineWidth: string;
+                    outlineColor: string;
+                    outlineStyle: string;
+                    outlineOffset: string;
+                    backgroundColor: string;
+                } | {
+                    pointerEvents: string;
+                    color: string;
+                    outline: string;
+                    outlineColor: string;
+                    backgroundColor: string;
+                };
+                outline: string;
+                outlineColor: string;
+                backgroundColor: string;
+                _focusVisible: {
+                    outlineWidth: string;
+                    outlineColor: string;
+                    outlineStyle: string;
+                    outlineOffset: string;
+                };
+                _active: {
+                    backgroundColor: string;
+                };
+                color: string;
+                appearance: string;
+                border: string;
+                overflow: string;
+                fontSize: string;
+                display: string;
+                borderRadius: string;
+            } | {
+                _hover: {
+                    outline: string;
+                    outlineColor: string;
+                    backgroundColor: string;
+                } | {
+                    _hover: {
+                        backgroundColor: string;
+                    };
+                    _active: {
+                        backgroundColor: string;
+                    };
+                    color: string;
+                    backgroundColor: string;
+                };
+                _disabled: {
+                    pointerEvents: string;
+                    color: string;
+                    outlineWidth: string;
+                    outlineColor: string;
+                    outlineStyle: string;
+                    outlineOffset: string;
+                    backgroundColor: string;
+                } | {
+                    pointerEvents: string;
+                    color: string;
+                    outline: string;
+                    outlineColor: string;
+                    backgroundColor: string;
+                };
+                _active: {
+                    backgroundColor: string;
+                };
+                color: string;
+                backgroundColor: string;
+                _focusVisible: {
+                    outlineWidth: string;
+                    outlineColor: string;
+                    outlineStyle: string;
+                    outlineOffset: string;
+                };
+                appearance: string;
+                border: string;
+                overflow: string;
+                fontSize: string;
+                display: string;
+                borderRadius: string;
+            }) | undefined;
+            sizes?: {
+                sm: {
+                    boxShadow: string;
+                    _hover: {
+                        boxShadow: string;
+                    };
+                    _active: {
+                        boxShadow: string;
+                    };
+                };
+                lg: {
+                    boxShadow: string;
+                    _hover: {
+                        boxShadow: string;
+                    };
+                    _active: {
+                        boxShadow: string;
+                    };
+                };
+            } | undefined;
+            variants?: {
+                base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    _hover: {
+                        backgroundColor: string;
+                    };
+                    _active: {
+                        backgroundColor: string;
+                    };
+                    backgroundColor: string;
+                };
+                accent: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    _hover: {
+                        backgroundColor: string;
+                    };
+                    _active: {
+                        backgroundColor: string;
+                    };
+                    backgroundColor: string;
+                };
+                floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    _hover: {
+                        backgroundColor: string;
+                    };
+                    _active: {
+                        backgroundColor: string;
+                    };
+                    backgroundColor: string;
+                };
+            } | undefined;
+            defaultProps?: {
+                size?: "sm" | "lg" | undefined;
+                variant?: "base" | "floating" | "accent" | undefined;
+                colorScheme?: string | undefined;
+            } | undefined;
+        };
         TravelTag: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
                 container: {
@@ -9040,4 +9737,4 @@ declare const Text: _chakra_ui_system_dist_system_types.ComponentWithAs<"p", Tex
  **/
 declare function slugify(text: string | string[], maxLength?: number): string;
 
-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 };
+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, PressableCard, 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 };