@vygruppen/spor-react 9.8.3 → 9.10.0

package/dist/index.d.mts

@@ -65,13 +65,8 @@ type StackProps = Exclude<StackProps$1, "direction"> & {
  */
 declare const Stack: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", StackProps>;
 
-type RadioCardProps = UseRadioProps & BoxProps & {
-    children: React.ReactNode;
-    /** Defaults to "base" */
-    variant: "floating" | "base";
-};
 /**
- * Renders a radio card.
+ * Radio cards are used to present a set of options where only one option can be selected.
  *
  * The most basic version looks like this:
  *
@@ -81,6 +76,14 @@ type RadioCardProps = UseRadioProps & BoxProps & {
  * </RadioCard>
  * ```
  *
+ * In order to use RadioCard outside a RadioCardGroup, you need to pass the `isChecked` and `onChange` props.
+ *
+ * ```tsx
+ * <RadioCard isChecked={true} onChange={(e) => console.log(e.target.value)}>
+ *  Content
+ * </RadioCard>
+ * ```
+ *
  * In order to use RadioCard, you typically want to place these components in a group with several other RadioCards.
  *
  * ```tsx
@@ -112,6 +115,15 @@ type RadioCardProps = UseRadioProps & BoxProps & {
  * </RadioCard>
  * ```
  */
+type RadioCardProps = UseRadioProps & BoxProps & {
+    children: React.ReactNode;
+    /** Defaults to "base" */
+    variant?: "floating" | "base";
+    /** Needs to be defined if RadioCard is used outside RadioCardGroup */
+    isChecked?: boolean;
+    /** Needs to be defined if RadioCard is used outside RadioCardGroup */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+};
 declare const RadioCard: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", RadioCardProps>;
 
 type RadioCardGroupProps = RadioGroupProps$1 & {
@@ -211,7 +223,7 @@ declare const StaticCard: _chakra_ui_system_dist_system_types.ComponentWithAs<As
 
 type PressableCardProps = BoxProps & {
     /** Defaults to "base"  */
-    variant: "floating" | "accent" | "base";
+    variant?: "floating" | "accent" | "base";
 };
 /**
  * `PressableCard` is a component that renders a pressable card.
@@ -333,6 +345,8 @@ type BaseAlertProps = BoxProps & {
     variant: "info" | "success" | "warning" | "alt-transport" | "error";
     /** The body content of the alert */
     children: React.ReactNode;
+    /** The title of the alert */
+    title?: string;
 };
 
 type ClosableAlertProps = BaseAlertProps & {
@@ -361,7 +375,7 @@ type ClosableAlertProps = BaseAlertProps & {
  *   <Text>Some info here</Text>
  * </ClosableAlert>
  */
-declare const ClosableAlert: ({ variant, children, onClose: externalOnClose, }: ClosableAlertProps) => React.JSX.Element | null;
+declare const ClosableAlert: ({ variant, title, children, onClose: externalOnClose, }: ClosableAlertProps) => React.JSX.Element | null;
 
 type ExpandableAlertProps = BaseAlertProps & {
     /** The title string  */
@@ -401,7 +415,7 @@ type StaticAlertProps = BaseAlertProps;
  * </StaticAlert>
  * ```
  */
-declare const StaticAlert: ({ children, ...props }: StaticAlertProps) => React.JSX.Element;
+declare const StaticAlert: ({ children, title, ...props }: StaticAlertProps) => React.JSX.Element;
 
 type BreadcrumbProps = Omit<BreadcrumbProps$1, "variant"> & {
     variant?: "base" | "ghost";
@@ -1174,7 +1188,7 @@ type InfoSelectProps<T extends object> = {
  *
  * @see https://spor.vy.no/components/info-select
  */
-declare function InfoSelect<T extends object>({ placeholder, width, height, onChange, value, isLabelSrOnly, defaultValue, variant, ...props }: InfoSelectProps<T>): React.JSX.Element;
+declare function InfoSelect<T extends object>({ placeholder, onChange, value, isLabelSrOnly, defaultValue, variant, ...props }: InfoSelectProps<T>): React.JSX.Element;
 
 type InputProps = Omit<InputProps$1, "variant" | "size"> & {
     /** The input's label */
@@ -2534,6 +2548,7 @@ declare const theme: {
                     position: string;
                     top: number;
                     right: number;
+                    color: string;
                 };
             } | undefined;
             sizes?: {
@@ -4619,6 +4634,13 @@ declare const theme: {
                     position: string;
                     width?: string | undefined;
                     whiteSpace?: string | undefined;
+                    fontSize: ("desktop.sm" | "mobile.xs")[];
+                };
+                innerButton: {
+                    display: string;
+                    flexDir: string;
+                    alignItems: string;
+                    justifyContent: string;
                 };
                 button: {
                     _disabled: {
@@ -4657,15 +4679,18 @@ declare const theme: {
                     outlineColor: string;
                     outlineStyle: string;
                     outlineOffset: string;
+                    display: string;
                     appearance: string;
+                    width: string;
+                    height: string;
                     borderTopRadius: string;
                     borderBottomRadius: string | number;
                     paddingY: number;
                     paddingX: number;
-                    display: string;
                     justifyContent: string;
                     alignItems: string;
                     fontSize: string;
+                    h: number;
                 } | {
                     _disabled: {
                         backgroundColor: string;
@@ -4701,16 +4726,20 @@ declare const theme: {
                     };
                     outline: string;
                     outlineColor: string;
+                    display: string;
                     appearance: string;
+                    width: string;
+                    height: string;
                     borderTopRadius: string;
                     borderBottomRadius: string | number;
                     paddingY: number;
                     paddingX: number;
-                    display: string;
                     justifyContent: string;
                     alignItems: string;
                     fontSize: string;
+                    h: number;
                 };
+                placeholder: {};
                 arrowIcon: {};
             }) | undefined;
             sizes?: {
@@ -5369,12 +5398,6 @@ declare const theme: {
                     backgroundColor: string;
                 };
                 item: {
-                    paddingX: number;
-                    paddingY: number;
-                    marginY: number;
-                    marginX: number;
-                    borderRadius: string;
-                    color: string;
                     cursor: string;
                     outline: string;
                     _active: {
@@ -5389,14 +5412,20 @@ declare const theme: {
                     _selected: {
                         backgroundColor: string;
                     };
+                    color: string;
+                    paddingX: number;
+                    paddingY: number;
+                    marginY: number;
+                    marginX: number;
+                    borderRadius: string;
                 };
                 label: {};
                 description: {
-                    fontSize: ("mobile.xs" | "desktop.xs")[];
-                    color: string;
                     "[aria-selected='true'] &": {
                         color: string;
                     };
+                    color: string;
+                    fontSize: ("mobile.xs" | "desktop.xs")[];
                 };
             }) | undefined;
             sizes?: {
@@ -5876,105 +5905,168 @@ declare const theme: {
         };
         RadioCard: {
             baseStyle?: ((props: any) => {
-                _checked: {
-                    _hover: {
-                        backgroundColor: string;
-                    };
-                    backgroundColor: string;
-                    outline: string;
-                    outlineColor: string;
-                };
-                _disabled: {
-                    color: string;
-                    outlineWidth: string;
-                    outlineColor: string;
-                    outlineStyle: string;
-                    outlineOffset: string;
-                    backgroundColor: string;
-                    pointerEvents: string;
-                } | {
-                    color: string;
-                    outline: string;
-                    outlineColor: string;
-                    backgroundColor: string;
-                    pointerEvents: string;
-                };
-                _focusVisible: {
-                    outlineWidth: string;
-                    outlineColor: string;
-                    outlineStyle: string;
-                    outlineOffset: string;
-                };
-                appearance: string;
-                border: string;
-                overflow: string;
-                fontSize: string;
-                display: string;
-                borderRadius: string;
-            }) | undefined;
-            sizes?: {
-                [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
-            } | undefined;
-            variants?: {
-                base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    _hover: {
+                container: {
+                    transitionProperty: string;
+                    transitionDuration: string;
+                    _disabled: {
+                        color: string;
                         outlineWidth: string;
                         outlineColor: string;
                         outlineStyle: string;
                         outlineOffset: string;
                         backgroundColor: string;
+                        pointerEvents: string;
                     } | {
+                        color: string;
                         outline: string;
                         outlineColor: string;
                         backgroundColor: string;
+                        pointerEvents: string;
                     };
-                    _active: {
-                        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;
+                    cursor: string;
+                    borderRadius: string;
+                };
+                checked: {
                     backgroundColor: string;
-                } | {
-                    _hover: {
+                    outlineColor: string;
+                    outline: string;
+                };
+                radioInput: {
+                    appearance: string;
+                    position: string;
+                    opacity: number;
+                    zIndex: number;
+                };
+            }) | undefined;
+            sizes?: {
+                [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
+                    keys: ("container" | "checked" | "radioInput")[];
+                }>;
+            } | undefined;
+            variants?: {
+                base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    container: {
+                        _hover: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                            backgroundColor: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                            backgroundColor: string;
+                        };
+                        _active: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                            backgroundColor: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                            backgroundColor: string;
+                        };
                         outlineWidth: string;
                         outlineColor: string;
                         outlineStyle: string;
                         outlineOffset: string;
                         backgroundColor: string;
+                        color: string;
                     } | {
+                        _hover: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                            backgroundColor: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                            backgroundColor: string;
+                        };
+                        _active: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                            backgroundColor: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                            backgroundColor: string;
+                        };
                         outline: string;
                         outlineColor: string;
                         backgroundColor: string;
+                        color: string;
                     };
-                    _active: {
-                        backgroundColor: string;
+                    checked: {
+                        _hover: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                        };
+                        _active: {
+                            outlineWidth: string;
+                            outlineColor: string;
+                            outlineStyle: string;
+                            outlineOffset: string;
+                            backgroundColor: string;
+                        } | {
+                            outline: string;
+                            outlineColor: string;
+                            backgroundColor: string;
+                        };
                     };
-                    outline: string;
-                    outlineColor: string;
-                    backgroundColor: string;
                 };
                 floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    boxShadow: string;
-                    _hover: {
+                    container: {
                         boxShadow: string;
+                        _hover: {
+                            boxShadow: string;
+                            outline: string;
+                            outlineColor: string;
+                            backgroundColor: string;
+                        };
+                        _active: {
+                            outline: string;
+                            outlineColor: string;
+                            backgroundColor: string;
+                        };
                         outline: string;
                         outlineColor: string;
                         backgroundColor: string;
+                        color: string;
                     };
-                    _active: {
-                        outline: string;
-                        outlineColor: string;
-                        backgroundColor: string;
-                    };
-                    _checked: {
+                    checked: {
+                        cursor: string;
                         _hover: {
                             outline: string;
                             outlineColor: string;
                         };
+                        _active: {
+                            outline: string;
+                            outlineColor: string;
+                            backgroundColor: string;
+                        };
                     };
-                    backgroundColor: string;
                 };
             } | undefined;
             defaultProps?: {
@@ -5982,6 +6074,7 @@ declare const theme: {
                 variant?: "base" | "floating" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
+            parts: ("container" | "checked" | "radioInput")[];
         };
         Radio: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
@@ -7224,25 +7317,39 @@ declare const theme: {
         };
         PressableCard: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                appearance: string;
+                border: string;
+                overflow: string;
+                fontSize: string;
+                display: string;
+                borderRadius: string;
+                cursor: string;
+                transitionProperty: string;
+                transitionDuration: string;
+                "button&, a&, label&, &.is-clickable": {
+                    _focusVisible: {
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                    };
+                };
                 _disabled: {
                     outline: string;
                     pointerEvents: string;
                     color: string;
-                    backgroundColor: string;
-                };
-                _focusVisible: {
                     outlineWidth: string;
                     outlineColor: string;
                     outlineStyle: string;
                     outlineOffset: string;
+                    backgroundColor: string;
+                } | {
+                    outline: string;
+                    pointerEvents: string;
+                    color: string;
+                    outlineColor: string;
+                    backgroundColor: string;
                 };
-                appearance: string;
-                border: string;
-                overflow: string;
-                fontSize: string;
-                display: string;
-                borderRadius: string;
-                cursor: string;
             }) | undefined;
             sizes?: {
                 [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
@@ -7273,6 +7380,7 @@ declare const theme: {
                     outlineColor: string;
                     outlineStyle: string;
                     outlineOffset: string;
+                    cursor: string;
                 } | {
                     _hover: {
                         outlineWidth: string;
@@ -7296,6 +7404,7 @@ declare const theme: {
                     };
                     outline: string;
                     outlineColor: string;
+                    cursor: string;
                 };
                 accent: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     boxShadow: string;
@@ -7320,7 +7429,11 @@ declare const theme: {
                     _active: {
                         boxShadow: string;
                         backgroundColor: string;
+                        outline: string;
+                        outlineColor: string;
                     };
+                    outline: string;
+                    outlineColor: string;
                     backgroundColor: string;
                 };
             } | undefined;