@vygruppen/spor-react 8.0.1 → 8.1.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@8.0.1 build
+> @vygruppen/spor-react@8.1.0 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -8,15 +8,15 @@
 CLI Target: node16
 CJS Build start
 ESM Build start
-"Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/chunk-5VZ5S46A.mjs".
 "Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/index.js".
 DTS Build start
+"Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/chunk-JUNOSADJ.mjs".
+CJS dist/index.js 502.62 KB
+CJS ⚡️ Build success in 2210ms
 ESM dist/index.mjs                      2.01 KB
-ESM dist/CountryCodeSelect-SCMCRKY4.mjs 1.19 KB
-ESM dist/chunk-5VZ5S46A.mjs             393.00 KB
-ESM ⚡️ Build success in 2110ms
-CJS dist/index.js 500.11 KB
-CJS ⚡️ Build success in 2110ms
-DTS ⚡️ Build success in 10383ms
-DTS dist/index.d.ts  268.53 KB
-DTS dist/index.d.mts 268.53 KB
+ESM dist/CountryCodeSelect-X4ONXTIF.mjs 1.19 KB
+ESM dist/chunk-JUNOSADJ.mjs             394.94 KB
+ESM ⚡️ Build success in 2211ms
+DTS ⚡️ Build success in 11198ms
+DTS dist/index.d.ts  271.10 KB
+DTS dist/index.d.mts 271.10 KB

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @vygruppen/spor-react
 
+## 8.1.0
+
+### Minor Changes
+
+- 3c599d7: Combobox: Add inputRef prop
+
+### Patch Changes
+
+- c084847: ExpandableAlerts: added new hover and active styling for this component
+
 ## 8.0.1
 
 ### Patch Changes

package/dist/{CountryCodeSelect-SCMCRKY4.mjs → CountryCodeSelect-X4ONXTIF.mjs}

@@ -1,4 +1,4 @@
-import { createTexts, useTranslation, InfoSelect, Item } from './chunk-5VZ5S46A.mjs';
+import { createTexts, useTranslation, InfoSelect, Item } from './chunk-JUNOSADJ.mjs';
 import React from 'react';
 import { getSupportedCallingCodes } from 'awesome-phonenumber';
 

package/dist/{chunk-5VZ5S46A.mjs → chunk-JUNOSADJ.mjs}

@@ -1509,6 +1509,7 @@ var ExpandableAlert = ({
   },
   ...boxProps
 }) => {
+  const styles3 = useMultiStyleConfig("AlertExpandable", { variant });
   return /* @__PURE__ */ React69__default.createElement(BaseAlert, { variant, ...boxProps, paddingX: 0, paddingY: 0 }, /* @__PURE__ */ React69__default.createElement(
     Accordion$1,
     {
@@ -1517,7 +1518,7 @@ var ExpandableAlert = ({
       allowToggle: true,
       flexGrow: "1"
     },
-    /* @__PURE__ */ React69__default.createElement(AccordionItem, null, /* @__PURE__ */ React69__default.createElement(AccordionButton, { paddingX: 3, paddingY: 2, fontSize: "inherit" }, /* @__PURE__ */ React69__default.createElement(
+    /* @__PURE__ */ React69__default.createElement(AccordionItem, null, /* @__PURE__ */ React69__default.createElement(AccordionButton, { sx: styles3.container }, /* @__PURE__ */ React69__default.createElement(
       Flex,
       {
         justifyContent: "space-between",
@@ -2667,10 +2668,12 @@ function Combobox({
   paddingX,
   paddingY,
   emptyContent,
+  inputRef: externalInputRef,
   ...rest
 }) {
   const { contains: contains2 } = useFilter({ sensitivity: "base" });
-  const inputRef = useRef(null);
+  const fallbackInputRef = useRef(null);
+  const inputRef = externalInputRef ?? fallbackInputRef;
   const listBoxRef = useRef(null);
   const popoverRef = useRef(null);
   const inputWidth = useInputWidth(inputRef);
@@ -3429,7 +3432,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-SCMCRKY4.mjs'));
+var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-X4ONXTIF.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
 });
@@ -6246,16 +6249,16 @@ Object.assign({}, space, layout, flexbox, grid, position);
 function defineStyle(styles3) {
   return styles3;
 }
-function defineStyleConfig(config38) {
-  return config38;
+function defineStyleConfig(config39) {
+  return config39;
 }
-function createMultiStyleConfigHelpers(parts15) {
+function createMultiStyleConfigHelpers(parts16) {
   return {
-    definePartsStyle(config38) {
-      return config38;
+    definePartsStyle(config39) {
+      return config39;
     },
-    defineMultiStyleConfig(config38) {
-      return { parts: parts15, ...config38 };
+    defineMultiStyleConfig(config39) {
+      return { parts: parts16, ...config39 };
     }
   };
 }
@@ -6418,7 +6421,7 @@ function anatomy(name, map = {}) {
       "[anatomy] .part(...) should only be called once. Did you mean to use .extend(...) ?"
     );
   }
-  function parts15(...values) {
+  function parts16(...values) {
     assert();
     for (const part of values) {
       map[part] = toPart(part);
@@ -6458,7 +6461,7 @@ function anatomy(name, map = {}) {
   }
   const __type = {};
   return {
-    parts: parts15,
+    parts: parts16,
     toPart,
     extend,
     selectors,
@@ -9512,6 +9515,7 @@ var components_exports = {};
 __export(components_exports, {
   Accordion: () => accordion_default,
   Alert: () => alert_default,
+  AlertExpandable: () => alert_expandable_default,
   Badge: () => badge_default,
   Breadcrumb: () => breadcrumb_default,
   Button: () => button_default,
@@ -13581,6 +13585,93 @@ var config37 = defineStyleConfig$1({
   }
 });
 var toast_default = config37;
+
+// src/theme/components/alert-expandable.ts
+var parts15 = anatomy("alertExpandable").parts("container");
+var helpers26 = createMultiStyleConfigHelpers(parts15.keys);
+var config38 = helpers26.defineMultiStyleConfig({
+  baseStyle: {
+    container: {
+      paddingX: 3,
+      paddingY: 2,
+      fontSize: "inherit",
+      _expanded: {
+        borderBottomRadius: "none"
+      }
+    }
+  },
+  variants: {
+    info: {
+      container: {
+        _hover: {
+          boxShadow: getBoxShadowString({
+            borderColor: "sky",
+            borderWidth: 2
+          })
+        },
+        _active: {
+          backgroundColor: "icyBlue"
+        }
+      }
+    },
+    success: {
+      container: {
+        _hover: {
+          boxShadow: getBoxShadowString({
+            borderColor: "blueGreen",
+            borderWidth: 2
+          })
+        },
+        _active: {
+          backgroundColor: "mint"
+        }
+      }
+    },
+    warning: {
+      container: {
+        _hover: {
+          boxShadow: getBoxShadowString({
+            borderColor: "sunshine",
+            borderWidth: 2
+          })
+        },
+        _active: {
+          backgroundColor: "cornSilk"
+        }
+      }
+    },
+    "alt-transport": {
+      container: {
+        _hover: {
+          boxShadow: getBoxShadowString({
+            borderColor: "golden",
+            borderWidth: 2
+          })
+        },
+        _active: {
+          backgroundColor: "sunshine"
+        }
+      }
+    },
+    error: {
+      container: {
+        _hover: {
+          boxShadow: getBoxShadowString({
+            borderColor: "apricot",
+            borderWidth: 2
+          })
+        },
+        _active: {
+          backgroundColor: "pink"
+        }
+      }
+    }
+  },
+  defaultProps: {
+    variant: "info"
+  }
+});
+var alert_expandable_default = config38;
 var fontFaces = `
 @font-face {
   font-family: ${tokens10__default.asset.font["vy-sans"]["light"].name};

package/dist/index.d.mts

@@ -774,6 +774,8 @@ type ComboboxProps<T> = AriaComboBoxProps<T> & {
     isLoading?: boolean;
     /** Optional UI to show when there are no matching items */
     emptyContent?: React.ReactNode;
+    /** A ref to the input field */
+    inputRef?: React.RefObject<HTMLInputElement>;
 } & Pick<InputProps, "marginTop" | "marginBottom" | "marginRight" | "marginLeft" | "marginY" | "marginX" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingY" | "paddingX" | "leftIcon" | "rightIcon" | "borderTopRightRadius" | "borderTopLeftRadius" | "borderBottomRightRadius" | "borderBottomLeftRadius" | "onFocus">;
 /**
  * A combobox is a combination of an input and a list of suggestions.
@@ -798,7 +800,7 @@ type ComboboxProps<T> = AriaComboBoxProps<T> & {
  * </Combobox>
  * ```
  */
-declare function Combobox<T extends object>({ label, isLoading, leftIcon, rightIcon, borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius, marginBottom, marginTop, marginX, marginY, marginRight, marginLeft, paddingBottom, paddingRight, paddingTop, paddingLeft, paddingX, paddingY, emptyContent, ...rest }: ComboboxProps<T>): React.JSX.Element;
+declare function Combobox<T extends object>({ label, isLoading, leftIcon, rightIcon, borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius, marginBottom, marginTop, marginX, marginY, marginRight, marginLeft, paddingBottom, paddingRight, paddingTop, paddingLeft, paddingX, paddingY, emptyContent, inputRef: externalInputRef, ...rest }: ComboboxProps<T>): React.JSX.Element;
 
 type FormControlProps = FormControlProps$1;
 declare const FormControl: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", FormControlProps$1>;
@@ -5807,6 +5809,81 @@ declare const theme: {
             } | undefined;
             parts: ("title" | "container" | "icon" | "description" | "iconContainer" | "textContainer" | "deviationIcon")[];
         };
+        AlertExpandable: {
+            baseStyle?: {
+                container: {
+                    paddingX: number;
+                    paddingY: number;
+                    fontSize: string;
+                    _expanded: {
+                        borderBottomRadius: string;
+                    };
+                };
+            } | undefined;
+            sizes?: {
+                [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
+                    keys: "container"[];
+                }>;
+            } | undefined;
+            variants?: {
+                info: {
+                    container: {
+                        _hover: {
+                            boxShadow: string;
+                        };
+                        _active: {
+                            backgroundColor: string;
+                        };
+                    };
+                };
+                success: {
+                    container: {
+                        _hover: {
+                            boxShadow: string;
+                        };
+                        _active: {
+                            backgroundColor: string;
+                        };
+                    };
+                };
+                warning: {
+                    container: {
+                        _hover: {
+                            boxShadow: string;
+                        };
+                        _active: {
+                            backgroundColor: string;
+                        };
+                    };
+                };
+                "alt-transport": {
+                    container: {
+                        _hover: {
+                            boxShadow: string;
+                        };
+                        _active: {
+                            backgroundColor: string;
+                        };
+                    };
+                };
+                error: {
+                    container: {
+                        _hover: {
+                            boxShadow: string;
+                        };
+                        _active: {
+                            backgroundColor: string;
+                        };
+                    };
+                };
+            } | undefined;
+            defaultProps?: {
+                size?: string | number | undefined;
+                variant?: "error" | "info" | "success" | "warning" | "alt-transport" | undefined;
+                colorScheme?: string | undefined;
+            } | undefined;
+            parts: "container"[];
+        };
         Avatar: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
                 badge: {

package/dist/index.d.ts

@@ -774,6 +774,8 @@ type ComboboxProps<T> = AriaComboBoxProps<T> & {
     isLoading?: boolean;
     /** Optional UI to show when there are no matching items */
     emptyContent?: React.ReactNode;
+    /** A ref to the input field */
+    inputRef?: React.RefObject<HTMLInputElement>;
 } & Pick<InputProps, "marginTop" | "marginBottom" | "marginRight" | "marginLeft" | "marginY" | "marginX" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingY" | "paddingX" | "leftIcon" | "rightIcon" | "borderTopRightRadius" | "borderTopLeftRadius" | "borderBottomRightRadius" | "borderBottomLeftRadius" | "onFocus">;
 /**
  * A combobox is a combination of an input and a list of suggestions.
@@ -798,7 +800,7 @@ type ComboboxProps<T> = AriaComboBoxProps<T> & {
  * </Combobox>
  * ```
  */
-declare function Combobox<T extends object>({ label, isLoading, leftIcon, rightIcon, borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius, marginBottom, marginTop, marginX, marginY, marginRight, marginLeft, paddingBottom, paddingRight, paddingTop, paddingLeft, paddingX, paddingY, emptyContent, ...rest }: ComboboxProps<T>): React.JSX.Element;
+declare function Combobox<T extends object>({ label, isLoading, leftIcon, rightIcon, borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius, marginBottom, marginTop, marginX, marginY, marginRight, marginLeft, paddingBottom, paddingRight, paddingTop, paddingLeft, paddingX, paddingY, emptyContent, inputRef: externalInputRef, ...rest }: ComboboxProps<T>): React.JSX.Element;
 
 type FormControlProps = FormControlProps$1;
 declare const FormControl: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", FormControlProps$1>;
@@ -5807,6 +5809,81 @@ declare const theme: {
             } | undefined;
             parts: ("title" | "container" | "icon" | "description" | "iconContainer" | "textContainer" | "deviationIcon")[];
         };
+        AlertExpandable: {
+            baseStyle?: {
+                container: {
+                    paddingX: number;
+                    paddingY: number;
+                    fontSize: string;
+                    _expanded: {
+                        borderBottomRadius: string;
+                    };
+                };
+            } | undefined;
+            sizes?: {
+                [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
+                    keys: "container"[];
+                }>;
+            } | undefined;
+            variants?: {
+                info: {
+                    container: {
+                        _hover: {
+                            boxShadow: string;
+                        };
+                        _active: {
+                            backgroundColor: string;
+                        };
+                    };
+                };
+                success: {
+                    container: {
+                        _hover: {
+                            boxShadow: string;
+                        };
+                        _active: {
+                            backgroundColor: string;
+                        };
+                    };
+                };
+                warning: {
+                    container: {
+                        _hover: {
+                            boxShadow: string;
+                        };
+                        _active: {
+                            backgroundColor: string;
+                        };
+                    };
+                };
+                "alt-transport": {
+                    container: {
+                        _hover: {
+                            boxShadow: string;
+                        };
+                        _active: {
+                            backgroundColor: string;
+                        };
+                    };
+                };
+                error: {
+                    container: {
+                        _hover: {
+                            boxShadow: string;
+                        };
+                        _active: {
+                            backgroundColor: string;
+                        };
+                    };
+                };
+            } | undefined;
+            defaultProps?: {
+                size?: string | number | undefined;
+                variant?: "error" | "info" | "success" | "warning" | "alt-transport" | undefined;
+                colorScheme?: string | undefined;
+            } | undefined;
+            parts: "container"[];
+        };
         Avatar: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
                 badge: {

package/dist/index.js

@@ -1046,6 +1046,7 @@ var init_ExpandableAlert = __esm({
       },
       ...boxProps
     }) => {
+      const styles3 = react.useMultiStyleConfig("AlertExpandable", { variant });
       return /* @__PURE__ */ React69__namespace.default.createElement(BaseAlert, { variant, ...boxProps, paddingX: 0, paddingY: 0 }, /* @__PURE__ */ React69__namespace.default.createElement(
         react.Accordion,
         {
@@ -1054,7 +1055,7 @@ var init_ExpandableAlert = __esm({
           allowToggle: true,
           flexGrow: "1"
         },
-        /* @__PURE__ */ React69__namespace.default.createElement(react.AccordionItem, null, /* @__PURE__ */ React69__namespace.default.createElement(react.AccordionButton, { paddingX: 3, paddingY: 2, fontSize: "inherit" }, /* @__PURE__ */ React69__namespace.default.createElement(
+        /* @__PURE__ */ React69__namespace.default.createElement(react.AccordionItem, null, /* @__PURE__ */ React69__namespace.default.createElement(react.AccordionButton, { sx: styles3.container }, /* @__PURE__ */ React69__namespace.default.createElement(
           react.Flex,
           {
             justifyContent: "space-between",
@@ -3171,10 +3172,12 @@ function Combobox({
   paddingX,
   paddingY,
   emptyContent,
+  inputRef: externalInputRef,
   ...rest
 }) {
   const { contains: contains2 } = reactAria.useFilter({ sensitivity: "base" });
-  const inputRef = React69.useRef(null);
+  const fallbackInputRef = React69.useRef(null);
+  const inputRef = externalInputRef ?? fallbackInputRef;
   const listBoxRef = React69.useRef(null);
   const popoverRef = React69.useRef(null);
   const inputWidth = useInputWidth(inputRef);
@@ -6081,16 +6084,16 @@ function defineCssVars(scope, keys2) {
 function defineStyle(styles3) {
   return styles3;
 }
-function defineStyleConfig(config38) {
-  return config38;
+function defineStyleConfig(config39) {
+  return config39;
 }
-function createMultiStyleConfigHelpers(parts15) {
+function createMultiStyleConfigHelpers(parts16) {
   return {
-    definePartsStyle(config38) {
-      return config38;
+    definePartsStyle(config39) {
+      return config39;
     },
-    defineMultiStyleConfig(config38) {
-      return { parts: parts15, ...config38 };
+    defineMultiStyleConfig(config39) {
+      return { parts: parts16, ...config39 };
     }
   };
 }
@@ -7413,7 +7416,7 @@ function anatomy(name, map = {}) {
       "[anatomy] .part(...) should only be called once. Did you mean to use .extend(...) ?"
     );
   }
-  function parts15(...values) {
+  function parts16(...values) {
     assert();
     for (const part of values) {
       map[part] = toPart(part);
@@ -7453,7 +7456,7 @@ function anatomy(name, map = {}) {
   }
   const __type = {};
   return {
-    parts: parts15,
+    parts: parts16,
     toPart,
     extend,
     selectors,
@@ -15276,11 +15279,107 @@ var init_toast = __esm({
   }
 });
 
+// src/theme/components/alert-expandable.ts
+var parts15, helpers26, config38, alert_expandable_default;
+var init_alert_expandable = __esm({
+  "src/theme/components/alert-expandable.ts"() {
+    init_dist4();
+    init_dist3();
+    init_box_shadow_utils();
+    parts15 = anatomy("alertExpandable").parts("container");
+    helpers26 = createMultiStyleConfigHelpers(parts15.keys);
+    config38 = helpers26.defineMultiStyleConfig({
+      baseStyle: {
+        container: {
+          paddingX: 3,
+          paddingY: 2,
+          fontSize: "inherit",
+          _expanded: {
+            borderBottomRadius: "none"
+          }
+        }
+      },
+      variants: {
+        info: {
+          container: {
+            _hover: {
+              boxShadow: getBoxShadowString({
+                borderColor: "sky",
+                borderWidth: 2
+              })
+            },
+            _active: {
+              backgroundColor: "icyBlue"
+            }
+          }
+        },
+        success: {
+          container: {
+            _hover: {
+              boxShadow: getBoxShadowString({
+                borderColor: "blueGreen",
+                borderWidth: 2
+              })
+            },
+            _active: {
+              backgroundColor: "mint"
+            }
+          }
+        },
+        warning: {
+          container: {
+            _hover: {
+              boxShadow: getBoxShadowString({
+                borderColor: "sunshine",
+                borderWidth: 2
+              })
+            },
+            _active: {
+              backgroundColor: "cornSilk"
+            }
+          }
+        },
+        "alt-transport": {
+          container: {
+            _hover: {
+              boxShadow: getBoxShadowString({
+                borderColor: "golden",
+                borderWidth: 2
+              })
+            },
+            _active: {
+              backgroundColor: "sunshine"
+            }
+          }
+        },
+        error: {
+          container: {
+            _hover: {
+              boxShadow: getBoxShadowString({
+                borderColor: "apricot",
+                borderWidth: 2
+              })
+            },
+            _active: {
+              backgroundColor: "pink"
+            }
+          }
+        }
+      },
+      defaultProps: {
+        variant: "info"
+      }
+    });
+    alert_expandable_default = config38;
+  }
+});
+
 // src/theme/components/index.ts
 var components_exports = {};
 __export(components_exports, {
   Accordion: () => accordion_default,
   Alert: () => alert_default,
+  AlertExpandable: () => alert_expandable_default,
   Badge: () => badge_default,
   Breadcrumb: () => breadcrumb_default,
   Button: () => button_default,
@@ -15358,6 +15457,7 @@ var init_components = __esm({
     init_textarea();
     init_toast();
     init_travel_tag();
+    init_alert_expandable();
   }
 });
 exports.fontFaces = void 0;

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-5VZ5S46A.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-JUNOSADJ.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "8.0.1",
+  "version": "8.1.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/alert/ExpandableAlert.tsx

@@ -6,6 +6,7 @@ import {
   AccordionPanel,
   Box,
   Flex,
+  useMultiStyleConfig,
 } from "@chakra-ui/react";
 import React from "react";
 import { AlertIcon } from "./AlertIcon";
@@ -44,6 +45,7 @@ export const ExpandableAlert = ({
   onToggle = () => {},
   ...boxProps
 }: ExpandableAlertProps) => {
+  const styles = useMultiStyleConfig("AlertExpandable", { variant });
   return (
     <BaseAlert variant={variant} {...boxProps} paddingX={0} paddingY={0}>
       <Accordion
@@ -53,7 +55,7 @@ export const ExpandableAlert = ({
         flexGrow="1"
       >
         <AccordionItem>
-          <AccordionButton paddingX={3} paddingY={2} fontSize="inherit">
+          <AccordionButton sx={styles.container}>
             <Flex
               justifyContent="space-between"
               alignItems="center"

package/src/input/Combobox.tsx

@@ -11,6 +11,8 @@ export type ComboboxProps<T> = AriaComboBoxProps<T> & {
   isLoading?: boolean;
   /** Optional UI to show when there are no matching items */
   emptyContent?: React.ReactNode;
+  /** A ref to the input field */
+  inputRef?: React.RefObject<HTMLInputElement>;
 } & Pick<
     InputProps,
     | "marginTop"
@@ -78,11 +80,13 @@ export function Combobox<T extends object>({
   paddingX,
   paddingY,
   emptyContent,
+  inputRef: externalInputRef,
   ...rest
 }: ComboboxProps<T>) {
   const { contains } = useFilter({ sensitivity: "base" });
 
-  const inputRef = useRef<HTMLInputElement>(null);
+  const fallbackInputRef = useRef<HTMLInputElement>(null);
+  const inputRef = externalInputRef ?? fallbackInputRef;
   const listBoxRef = useRef(null);
   const popoverRef = useRef(null);
 

package/src/theme/components/alert-expandable.ts

@@ -0,0 +1,91 @@
+import { anatomy } from "@chakra-ui/anatomy";
+import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
+import { getBoxShadowString } from "../utils/box-shadow-utils";
+
+const parts = anatomy("alertExpandable").parts("container");
+const helpers = createMultiStyleConfigHelpers(parts.keys);
+
+const config = helpers.defineMultiStyleConfig({
+  baseStyle: {
+    container: {
+      paddingX: 3,
+      paddingY: 2,
+      fontSize: "inherit",
+      _expanded: {
+        borderBottomRadius: "none",
+      },
+    },
+  },
+  variants: {
+    info: {
+      container: {
+        _hover: {
+          boxShadow: getBoxShadowString({
+            borderColor: "sky",
+            borderWidth: 2,
+          }),
+        },
+        _active: {
+          backgroundColor: "icyBlue",
+        },
+      },
+    },
+    success: {
+      container: {
+        _hover: {
+          boxShadow: getBoxShadowString({
+            borderColor: "blueGreen",
+            borderWidth: 2,
+          }),
+        },
+        _active: {
+          backgroundColor: "mint",
+        },
+      },
+    },
+    warning: {
+      container: {
+        _hover: {
+          boxShadow: getBoxShadowString({
+            borderColor: "sunshine",
+            borderWidth: 2,
+          }),
+        },
+        _active: {
+          backgroundColor: "cornSilk",
+        },
+      },
+    },
+    "alt-transport": {
+      container: {
+        _hover: {
+          boxShadow: getBoxShadowString({
+            borderColor: "golden",
+            borderWidth: 2,
+          }),
+        },
+        _active: {
+          backgroundColor: "sunshine",
+        },
+      },
+    },
+    error: {
+      container: {
+        _hover: {
+          boxShadow: getBoxShadowString({
+            borderColor: "apricot",
+            borderWidth: 2,
+          }),
+        },
+        _active: {
+          backgroundColor: "pink",
+        },
+      },
+    },
+  },
+  defaultProps: {
+    variant: "info",
+  },
+});
+
+export default config;

package/src/theme/components/index.ts

@@ -36,3 +36,4 @@ export { default as Tabs } from "./tabs";
 export { default as Textarea } from "./textarea";
 export { default as Toast } from "./toast";
 export { default as TravelTag } from "./travel-tag";
+export { default as AlertExpandable } from "./alert-expandable";