@vygruppen/spor-react 2.4.3 → 2.5.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@2.4.3 build
+> @vygruppen/spor-react@2.5.0 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -10,12 +10,12 @@
 ESM Build start
 DTS Build start
 "toTime" is imported from external module "@internationalized/date" but never used in "dist/index.js".
-"toTime" is imported from external module "@internationalized/date" but never used in "dist/chunk-Z3I6W6PC.mjs".
-CJS dist/index.js 896.27 KB
-CJS ⚡️ Build success in 5484ms
-ESM dist/index.mjs                      2.08 KB
-ESM dist/CountryCodeSelect-GFQIGSFV.mjs 351.67 KB
-ESM dist/chunk-Z3I6W6PC.mjs             416.47 KB
-ESM ⚡️ Build success in 5484ms
-DTS ⚡️ Build success in 22623ms
-DTS dist/index.d.ts 262.86 KB
+"toTime" is imported from external module "@internationalized/date" but never used in "dist/chunk-7GRTZA6T.mjs".
+CJS dist/index.js 895.46 KB
+CJS ⚡️ Build success in 5694ms
+ESM dist/index.mjs                      2.06 KB
+ESM dist/CountryCodeSelect-ZTEYBERS.mjs 351.67 KB
+ESM dist/chunk-7GRTZA6T.mjs             415.76 KB
+ESM ⚡️ Build success in 5707ms
+DTS ⚡️ Build success in 21517ms
+DTS dist/index.d.ts 259.31 KB

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @vygruppen/spor-react
 
+## 2.5.0
+
+### Minor Changes
+
+- 042dba35: Make accordions and cards default to the sm size
+
+### Patch Changes
+
+- f9d6bd34: Combobox: Fix a bug where menuTrigger="focus" wouldn't work
+- 76914a15: Remove non-working Autosuggest component
+
 ## 2.4.3
 
 ### Patch Changes

package/dist/{CountryCodeSelect-GFQIGSFV.mjs → CountryCodeSelect-ZTEYBERS.mjs}

@@ -1,4 +1,4 @@
-import { createTexts, useTranslation, InfoSelect, SelectItem } from './chunk-Z3I6W6PC.mjs';
+import { createTexts, useTranslation, InfoSelect, SelectItem } from './chunk-7GRTZA6T.mjs';
 import React from 'react';
 
 // ../../node_modules/awesome-phonenumber/index-esm.mjs

package/dist/{chunk-Z3I6W6PC.mjs → chunk-7GRTZA6T.mjs}

@@ -12,7 +12,7 @@ import { usePopover, Overlay, DismissButton, useOverlayTrigger, useButton, usePr
 import { motion } from 'framer-motion';
 import { DateFormatter, parseTime, createCalendar, Time, toCalendarDate, toCalendarDateTime, toCalendar, getMinimumDayInMonth, getMinimumMonthInYear, today, startOfWeek, startOfMonth, endOfWeek, endOfMonth, isSameDay, getDayOfWeek, maxDate, minDate, isEqualDay, getWeeksInMonth, getLocalTimeZone, GregorianCalendar, now, startOfYear, isSameMonth, isToday } from '@internationalized/date';
 export { Time } from '@internationalized/date';
-import { useOverlayTriggerState, useTimeFieldState, useAsyncList, useComboBoxState, Item, useSelectState } from 'react-stately';
+import { useOverlayTriggerState, useTimeFieldState, useComboBoxState, Item, useSelectState } from 'react-stately';
 export { Item, Section } from 'react-stately';
 import { useSwipeable } from 'react-swipeable';
 import { Global, keyframes } from '@emotion/react';
@@ -1523,7 +1523,7 @@ var Stack = forwardRef(
 
 // src/card/Card.tsx
 var Card = forwardRef(
-  ({ size: size2 = "lg", colorScheme = "white", children, ...props }, ref) => {
+  ({ size: size2 = "sm", colorScheme = "white", children, ...props }, ref) => {
     const styles2 = useStyleConfig("Card", {
       colorScheme,
       size: size2
@@ -4019,46 +4019,6 @@ var AttachedInputs = ({
     }
   );
 };
-function Autosuggest({
-  label,
-  fetcher,
-  onSelectionChange,
-  ...props
-}) {
-  const list2 = useAsyncList({
-    async load({ filterText }) {
-      return {
-        items: await fetcher(filterText)
-      };
-    }
-  });
-  const handleSelectionChange = (key) => {
-    if (!onSelectionChange) {
-      return;
-    }
-    let selectedItem = list2.getItem(key);
-    if (!selectedItem) {
-      selectedItem = list2.items.flatMap(
-        (item) => "children" in item && Array.isArray(item.children) ? item.children : []
-      ).find((child) => child.key === key);
-    }
-    if (selectedItem) {
-      onSelectionChange(selectedItem);
-    }
-  };
-  return /* @__PURE__ */ React49__default.createElement(
-    Combobox,
-    {
-      label,
-      items: list2.items,
-      inputValue: list2.filterText,
-      onInputChange: list2.setFilterText,
-      onSelectionChange: handleSelectionChange,
-      isLoading: list2.isLoading,
-      ...props
-    }
-  );
-}
 var Dialog = ({ title, children, ...props }) => {
   const ref = useRef(null);
   const { dialogProps, titleProps } = useDialog(props, ref);
@@ -4252,17 +4212,18 @@ function Combobox({
   paddingLeft,
   paddingX,
   paddingY,
-  onFocus,
+  emptyContent,
   ...rest
 }) {
   const { contains: contains2 } = useFilter({ sensitivity: "base" });
-  const state2 = useComboBoxState({
-    ...rest,
-    defaultFilter: contains2
-  });
   const inputRef = useRef(null);
   const listBoxRef = useRef(null);
   const popoverRef = useRef(null);
+  const state2 = useComboBoxState({
+    ...rest,
+    defaultFilter: contains2,
+    allowsEmptyCollection: Boolean(emptyContent)
+  });
   const {
     inputProps: { size: size2, ...inputProps },
     listBoxProps
@@ -4281,7 +4242,6 @@ function Combobox({
       ...inputProps,
       ref: inputRef,
       label,
-      onFocus,
       borderBottomLeftRadius: state2.isOpen ? 0 : borderBottomLeftRadius,
       borderBottomRightRadius: state2.isOpen ? 0 : borderBottomRightRadius,
       borderTopLeftRadius,
@@ -4327,7 +4287,7 @@ function Combobox({
         ...listBoxProps,
         state: state2,
         listBoxRef,
-        borderBottomRadius: "sm"
+        emptyContent
       },
       rest.children
     )
@@ -4414,6 +4374,7 @@ function ListBox({
       sx: styles2.container,
       "aria-busy": isLoading
     },
+    state2.collection.size === 0 && props.emptyContent,
     Array.from(state2.collection).map(
       (item) => item.type === "section" ? /* @__PURE__ */ React49__default.createElement(ListBoxSection, { key: item.key, section: item, state: state2 }) : /* @__PURE__ */ React49__default.createElement(Option, { key: item.key, item, state: state2 })
     )
@@ -4466,18 +4427,18 @@ function ListBoxSection({ section, state: state2 }) {
     heading: section.rendered,
     "aria-label": section["aria-label"]
   });
-  const isFirstSection = section.key !== state2.collection.getFirstKey();
-  const titleBackgroundColor = useColorModeValue("platinum", "dimGrey");
+  const isFirstSection = section.key === state2.collection.getFirstKey();
   const titleColor = useColorModeValue("darkGrey", "white");
   return /* @__PURE__ */ React49__default.createElement(ListItem, { ...itemProps }, section.rendered && /* @__PURE__ */ React49__default.createElement(
     Box,
     {
-      textStyle: "xs",
-      backgroundColor: titleBackgroundColor,
+      fontSize: "mobile.xs",
       color: titleColor,
       paddingX: 3,
       paddingY: 1,
-      marginTop: isFirstSection ? 0 : 0,
+      marginTop: isFirstSection ? 0 : 3,
+      textTransform: "uppercase",
+      fontWeight: "bold",
       ...headingProps
     },
     section.rendered
@@ -4561,7 +4522,7 @@ var texts10 = createTexts({
   }
 });
 var Input = forwardRef(
-  ({ label, leftIcon, rightIcon, id, ...props }, ref) => {
+  ({ label, leftIcon, rightIcon, id, size: size2, ...props }, ref) => {
     const formControlProps = useFormControlContext();
     const fallbackId = `input-${useId()}`;
     const inputId = id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? fallbackId;
@@ -4576,7 +4537,7 @@ var Input = forwardRef(
         ref,
         placeholder: " "
       }
-    ), /* @__PURE__ */ React49__default.createElement(FormLabel, { htmlFor: inputId, pointerEvents: "none" }, label), rightIcon && /* @__PURE__ */ React49__default.createElement(InputRightElement, null, rightIcon));
+    ), /* @__PURE__ */ React49__default.createElement(FormLabel, { htmlFor: inputId }, label), rightIcon && /* @__PURE__ */ React49__default.createElement(InputRightElement, null, rightIcon));
   }
 );
 var InputLeftElement2 = forwardRef(
@@ -4826,7 +4787,7 @@ var texts11 = createTexts({
   }
 });
 var PasswordInput = forwardRef(
-  ({ leftIcon, id, label, ...props }, ref) => {
+  ({ leftIcon, id, label, size: size2, ...props }, ref) => {
     const { isOpen: isShowingPassword, onToggle } = useDisclosure();
     const { t: t2 } = useTranslation();
     const formControlProps = useFormControlContext();
@@ -4939,7 +4900,7 @@ var texts13 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-GFQIGSFV.mjs'));
+var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-ZTEYBERS.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React49__default.createElement(Radio$1, { ...props, ref });
 });
@@ -10986,7 +10947,7 @@ var config3 = helpers.defineMultiStyleConfig({
   },
   defaultProps: {
     variant: "list",
-    size: "md"
+    size: "sm"
   }
 });
 var accordion_default = config3;
@@ -13050,19 +13011,27 @@ var config24 = helpers15.defineMultiStyleConfig({
       overflowY: "auto",
       maxHeight: "50vh",
       width: "100%",
-      listStyle: "none"
+      listStyle: "none",
+      borderBottomRadius: "sm"
     },
     item: {
-      paddingX: 3,
-      paddingY: 2,
+      paddingX: 2,
+      paddingY: 1,
+      marginY: 1,
+      marginX: 1,
+      borderRadius: "sm",
       color: mode("darkGrey", "white")(props),
       _hover: {
-        background: mode("mint", "darkTeal")(props),
+        backgroundColor: mode("seaMist", "darkTeal")(props),
+        outline: "none"
+      },
+      _active: {
+        backgroundColor: mode("mint", "darkTeal")(props),
         outline: "none"
       },
       _focus: {
         outline: "none",
-        backgroundColor: mode("mint", "darkTeal")(props)
+        backgroundColor: mode("seaMist", "darkTeal")(props)
       },
       _selected: {
         backgroundColor: mode("pine", "pine")(props),
@@ -14567,4 +14536,4 @@ var getToastComponent = (opts) => {
   return ({ id }) => /* @__PURE__ */ React49__default.createElement(BaseToast, { id, variant: opts.variant }, opts.text);
 };
 
-export { Accordion, AttachedInputs, Autosuggest, Badge, Button, ButtonGroup, Card, CardSelect, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerContent, Expandable, ExpandableAlert, ExpandableItem, FloatingActionButton, FormControl, FormErrorMessage, FormLabel3 as FormLabel, Heading, IconButton, InfoSelect, InfoTag, Input, InputLeftElement2 as InputLeftElement, InputRightElement2 as InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, ListBox, ModalHeader, NativeSelect, NumericStepper, PasswordInput, PhoneNumberInput, PlayPauseButton, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, SearchInput, SelectItem, SelectItemDescription, SelectItemLabel, SimpleDrawer, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Table, Tabs, Text4 as Text, TextLink, Textarea, TimePicker, TravelTag, VyLogo, WizardPopover, createTexts, fontFaces, theme, useToast, useTranslation };
+export { Accordion, AttachedInputs, Badge, Button, ButtonGroup, Card, CardSelect, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerContent, Expandable, ExpandableAlert, ExpandableItem, FloatingActionButton, FormControl, FormErrorMessage, FormLabel3 as FormLabel, Heading, IconButton, InfoSelect, InfoTag, Input, InputLeftElement2 as InputLeftElement, InputRightElement2 as InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, ListBox, ModalHeader, NativeSelect, NumericStepper, PasswordInput, PhoneNumberInput, PlayPauseButton, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, SearchInput, SelectItem, SelectItemDescription, SelectItemLabel, SimpleDrawer, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Table, Tabs, Text4 as Text, TextLink, Textarea, TimePicker, TravelTag, VyLogo, WizardPopover, createTexts, fontFaces, theme, useToast, useTranslation };

package/dist/index.d.ts

@@ -397,10 +397,10 @@ type CardProps = Exclude<BoxProps, "size"> & {
  * </Card>
  * ```
  *
- * There are lots of color schemes available. You can also set the size as either `sm` or `lg`. The default is `lg`.
+ * There are lots of color schemes available. You can also set the size as either `sm` or `lg`. The default is `sm`.
  *
  * ```tsx
- * <Card colorScheme="orange" size="sm">
+ * <Card colorScheme="orange" size="lg">
  *   A smaller card
  * </Card>
  * ```
@@ -607,109 +607,6 @@ type AttachedInputsProps = FlexProps;
  */
 declare const AttachedInputs: ({ flexDirection, ...rest }: AttachedInputsProps) => React__default.JSX.Element;
 
-type AutosuggestProps<T> = {
-    /** The label of the search field */
-    label: string;
-    /**
-     * The function responsible for fetching new suggestion items, based on the query.
-     *
-     * This will typically be an API call to a backend service.
-     *
-     * @example
-     * ```tsx
-     * const fetcher = async (query?: string) => {
-     *   const response = await fetch(`https://some.api.com/filter=${query}`);
-     *   const json = await response.json();
-     *   return json;
-     * };
-     * ```
-     * */
-    fetcher: (query?: string) => Promise<Iterable<T>>;
-    /**
-     * A render function that receives each item, and returns the UI for each item in the list.
-     *
-     * @example
-     * ```tsx
-     * <Autosuggest {...otherProps}>
-     *  {(user) => (
-     *    <Item key={user.id} textValue={user.fullName}>
-     *       <ItemLabel>{user.fullName}</ItemLabel>
-     *       <ItemDescription>{user.asl}</ItemDescription>
-     *    </Item>
-     *  )}
-     * </Autosuggest>
-     * ```
-     *
-     * You technically don't need to use the `<SelectItemLabel />` and `<SelectItemDescription />` components, but they are recommended to improve the accessibility of the search results. You can style them however you want, so there should never be a reason not to include at least the `<SelectItemLabel />` component. But who's judging?
-     * */
-    children: ComboboxProps<T>["children"];
-    /**
-     * Callback for when the selection changes. Returns the entire item.
-     */
-    onSelectionChange?: (item: T) => void;
-    /** The selected item key (controlled) */
-    selectedKey?: ComboboxProps<T>["selectedKey"];
-    /** What should open the menu.
-     *
-     * Defaults to "input"
-     */
-    menuTrigger?: ComboboxProps<T>["menuTrigger"];
-} & Pick<InputProps, "marginTop" | "marginBottom" | "marginRight" | "marginLeft" | "marginY" | "marginX" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingY" | "paddingX" | "leftIcon" | "rightIcon" | "borderTopRightRadius" | "borderTopLeftRadius" | "borderBottomRightRadius" | "borderBottomLeftRadius" | "onFocus">;
-/**
- * A component that provides an autocomplete search field with suggestions.
- *
- * This component requires a `fetcher` prop, which is a function that receives a query string, and returns a list of items that match the query.
- *
- * @example
- * ```tsx
- * const fetcher = async (query?: string) => {
- *   const response = await fetch(`https://some.api.vy.no/filter=${query}`);
- *   const json = await response.json();
- *   return json;
- * };
- *
- * const Example = () => {
- *   return (
- *     <Autosuggest
- *       label="Search for users"
- *       fetcher={fetcher}
- *       onSelectionChange={(item) => console.log(item)}
- *     >
- *       {(user) => (
- *         <Item key={user.id} textValue={user.fullName}>
- *           <ItemLabel>{user.fullName}</ItemLabel>
- *           <ItemDescription>{user.asl}</ItemDescription>
- *         </Item>
- *       )}
- *     </Autosuggest>
- *   );
- * };
- * ```
- *
- * The `fetcher` function can be any function that returns an iterable of items. This means that you can use any API library you want, as long as it returns an iterable of items.
- *
- * The items need to have a `key` property, which is used to identify the item. The `key` property can be any type, but it needs to be unique for each item.
- *
- * ```tsx
- * [{ key: 'some-key', ...}, { key: 'some-other-key', ... }]
- * ```
- *
- * You can also return a set of nested items, which will be rendered as a sub-list (or section). This is useful if you want to group your items. These items need to have a title prop (for labelling the section), as well as a `children` prop, which in turn will contain an iterable of items:
- *
- * ```tsx
- * [
- *   {
- *    title: 'The title of the section',
- *    children: [{ key: 'some-key', ... }]
- *   },
- *   {...}
- * ]
- * ```
- *
- * The `onSelectionChanged` will return the correct `item` (the one with the matching `key`), even if the item is in a sub-list.
- */
-declare function Autosuggest<T extends object>({ label, fetcher, onSelectionChange, ...props }: AutosuggestProps<T>): React__default.JSX.Element;
-
 type CardSelectProps = BoxProps & {
     /** The design of the trigger button.
      *
@@ -845,6 +742,8 @@ type ComboboxProps<T> = AriaComboBoxProps<T> & {
     label: string;
     /** Whether or not the combobox is waiting for new suggestions */
     isLoading?: boolean;
+    /** Optional UI to show when there are no matching items */
+    emptyContent?: React__default.ReactNode;
 } & 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.
@@ -869,7 +768,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, onFocus, ...rest }: ComboboxProps<T>): React__default.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, ...rest }: ComboboxProps<T>): React__default.JSX.Element;
 
 type FormControlProps = FormControlProps$1;
 declare const FormControl: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", FormControlProps$1>;
@@ -1045,7 +944,7 @@ type InfoSelectProps<T extends object> = {
  */
 declare function InfoSelect<T extends object>({ placeholder, width, height, onChange, value, isLabelSrOnly, defaultValue, ...props }: InfoSelectProps<T>): React__default.JSX.Element;
 
-type InputProps = Exclude<InputProps$1, "variant" | "size"> & {
+type InputProps = Omit<InputProps$1, "variant" | "size"> & {
     /** The input's label */
     label: string;
     /** Icon that shows up to the left */
@@ -1112,6 +1011,8 @@ type ListBoxProps<T> = AriaListBoxProps<T> & Omit<BoxProps, "filter" | "autoFocu
     isLoading?: boolean;
     /** The state of the listbox, provided externally somehow. */
     state: ListState<T> | SelectState<T>;
+    /** UI to render if the collection is empty */
+    emptyContent?: React__default.ReactNode;
 };
 /**
  * A component that renders a list box with selectable options.
@@ -3750,13 +3651,21 @@ declare const theme: {
                     maxHeight: string;
                     width: string;
                     listStyle: string;
+                    borderBottomRadius: string;
                 };
                 item: {
                     paddingX: number;
                     paddingY: number;
+                    marginY: number;
+                    marginX: number;
+                    borderRadius: string;
                     color: string;
                     _hover: {
-                        background: string;
+                        backgroundColor: string;
+                        outline: string;
+                    };
+                    _active: {
+                        backgroundColor: string;
                         outline: string;
                     };
                     _focus: {
@@ -7099,4 +7008,4 @@ type TextProps = Omit<TextProps$1, "textStyle"> & {
  */
 declare const Text: _chakra_ui_system_dist_system_types.ComponentWithAs<"p", TextProps>;
 
-export { Accordion, AccordionProps, AttachedInputs, Autosuggest, Badge, BadgeProps, 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, 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, NumericStepper, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PopoverWizardBody, PopoverWizardProps, ProgressBar, ProgressLoader, Radio, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SelectItem, SelectItemDescription, SelectItemLabel, SimpleDrawer, SimpleDrawerProps, SimplePopover, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoProps, WizardPopover, WizardPopoverProps, createTexts, fontFaces, theme, useToast, useTranslation };
+export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, 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, 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, NumericStepper, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PopoverWizardBody, PopoverWizardProps, ProgressBar, ProgressLoader, Radio, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SelectItem, SelectItemDescription, SelectItemLabel, SimpleDrawer, SimpleDrawerProps, SimplePopover, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoProps, WizardPopover, WizardPopoverProps, createTexts, fontFaces, theme, useToast, useTranslation };

package/dist/index.js

@@ -1075,7 +1075,7 @@ var init_Card = __esm({
   "src/card/Card.tsx"() {
     init_layout();
     exports.Card = react.forwardRef(
-      ({ size: size2 = "lg", colorScheme = "white", children, ...props }, ref) => {
+      ({ size: size2 = "sm", colorScheme = "white", children, ...props }, ref) => {
         const styles2 = react.useStyleConfig("Card", {
           colorScheme,
           size: size2
@@ -3750,51 +3750,6 @@ var init_AttachedInputs = __esm({
     };
   }
 });
-function Autosuggest({
-  label,
-  fetcher,
-  onSelectionChange,
-  ...props
-}) {
-  const list2 = reactStately.useAsyncList({
-    async load({ filterText }) {
-      return {
-        items: await fetcher(filterText)
-      };
-    }
-  });
-  const handleSelectionChange = (key) => {
-    if (!onSelectionChange) {
-      return;
-    }
-    let selectedItem = list2.getItem(key);
-    if (!selectedItem) {
-      selectedItem = list2.items.flatMap(
-        (item) => "children" in item && Array.isArray(item.children) ? item.children : []
-      ).find((child) => child.key === key);
-    }
-    if (selectedItem) {
-      onSelectionChange(selectedItem);
-    }
-  };
-  return /* @__PURE__ */ React49__namespace.default.createElement(
-    Combobox,
-    {
-      label,
-      items: list2.items,
-      inputValue: list2.filterText,
-      onInputChange: list2.setFilterText,
-      onSelectionChange: handleSelectionChange,
-      isLoading: list2.isLoading,
-      ...props
-    }
-  );
-}
-var init_Autosuggest = __esm({
-  "src/input/Autosuggest.tsx"() {
-    init_src();
-  }
-});
 var Dialog;
 var init_Dialog = __esm({
   "src/input/Dialog.tsx"() {
@@ -4767,17 +4722,18 @@ function Combobox({
   paddingLeft,
   paddingX,
   paddingY,
-  onFocus,
+  emptyContent,
   ...rest
 }) {
   const { contains: contains2 } = reactAria.useFilter({ sensitivity: "base" });
-  const state2 = reactStately.useComboBoxState({
-    ...rest,
-    defaultFilter: contains2
-  });
   const inputRef = React49.useRef(null);
   const listBoxRef = React49.useRef(null);
   const popoverRef = React49.useRef(null);
+  const state2 = reactStately.useComboBoxState({
+    ...rest,
+    defaultFilter: contains2,
+    allowsEmptyCollection: Boolean(emptyContent)
+  });
   const {
     inputProps: { size: size2, ...inputProps },
     listBoxProps
@@ -4796,7 +4752,6 @@ function Combobox({
       ...inputProps,
       ref: inputRef,
       label,
-      onFocus,
       borderBottomLeftRadius: state2.isOpen ? 0 : borderBottomLeftRadius,
       borderBottomRightRadius: state2.isOpen ? 0 : borderBottomRightRadius,
       borderTopLeftRadius,
@@ -4842,7 +4797,7 @@ function Combobox({
         ...listBoxProps,
         state: state2,
         listBoxRef,
-        borderBottomRadius: "sm"
+        emptyContent
       },
       rest.children
     )
@@ -4949,6 +4904,7 @@ function ListBox({
       sx: styles2.container,
       "aria-busy": isLoading
     },
+    state2.collection.size === 0 && props.emptyContent,
     Array.from(state2.collection).map(
       (item) => item.type === "section" ? /* @__PURE__ */ React49__namespace.default.createElement(ListBoxSection, { key: item.key, section: item, state: state2 }) : /* @__PURE__ */ React49__namespace.default.createElement(Option, { key: item.key, item, state: state2 })
     )
@@ -4992,18 +4948,18 @@ function ListBoxSection({ section, state: state2 }) {
     heading: section.rendered,
     "aria-label": section["aria-label"]
   });
-  const isFirstSection = section.key !== state2.collection.getFirstKey();
-  const titleBackgroundColor = react.useColorModeValue("platinum", "dimGrey");
+  const isFirstSection = section.key === state2.collection.getFirstKey();
   const titleColor = react.useColorModeValue("darkGrey", "white");
   return /* @__PURE__ */ React49__namespace.default.createElement(react.ListItem, { ...itemProps }, section.rendered && /* @__PURE__ */ React49__namespace.default.createElement(
     react.Box,
     {
-      textStyle: "xs",
-      backgroundColor: titleBackgroundColor,
+      fontSize: "mobile.xs",
       color: titleColor,
       paddingX: 3,
       paddingY: 1,
-      marginTop: isFirstSection ? 0 : 0,
+      marginTop: isFirstSection ? 0 : 3,
+      textTransform: "uppercase",
+      fontWeight: "bold",
       ...headingProps
     },
     section.rendered
@@ -5111,7 +5067,7 @@ exports.Input = void 0;
 var init_Input = __esm({
   "src/input/Input.tsx"() {
     exports.Input = react.forwardRef(
-      ({ label, leftIcon, rightIcon, id, ...props }, ref) => {
+      ({ label, leftIcon, rightIcon, id, size: size2, ...props }, ref) => {
         const formControlProps = react.useFormControlContext();
         const fallbackId = `input-${React49.useId()}`;
         const inputId = id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? fallbackId;
@@ -5126,7 +5082,7 @@ var init_Input = __esm({
             ref,
             placeholder: " "
           }
-        ), /* @__PURE__ */ React49__namespace.default.createElement(react.FormLabel, { htmlFor: inputId, pointerEvents: "none" }, label), rightIcon && /* @__PURE__ */ React49__namespace.default.createElement(react.InputRightElement, null, rightIcon));
+        ), /* @__PURE__ */ React49__namespace.default.createElement(react.FormLabel, { htmlFor: inputId }, label), rightIcon && /* @__PURE__ */ React49__namespace.default.createElement(react.InputRightElement, null, rightIcon));
       }
     );
   }
@@ -5422,7 +5378,7 @@ var init_PasswordInput = __esm({
     init_input();
     init_src();
     exports.PasswordInput = react.forwardRef(
-      ({ leftIcon, id, label, ...props }, ref) => {
+      ({ leftIcon, id, label, size: size2, ...props }, ref) => {
         const { isOpen: isShowingPassword, onToggle } = react.useDisclosure();
         const { t: t2 } = useTranslation();
         const formControlProps = react.useFormControlContext();
@@ -12358,7 +12314,6 @@ var init_Textarea = __esm({
 var init_input = __esm({
   "src/input/index.tsx"() {
     init_AttachedInputs();
-    init_Autosuggest();
     init_CardSelect();
     init_Checkbox();
     init_CheckboxGroup();
@@ -18993,7 +18948,7 @@ var init_accordion2 = __esm({
       },
       defaultProps: {
         variant: "list",
-        size: "md"
+        size: "sm"
       }
     });
     accordion_default = config3;
@@ -21200,19 +21155,27 @@ var init_listbox = __esm({
           overflowY: "auto",
           maxHeight: "50vh",
           width: "100%",
-          listStyle: "none"
+          listStyle: "none",
+          borderBottomRadius: "sm"
         },
         item: {
-          paddingX: 3,
-          paddingY: 2,
+          paddingX: 2,
+          paddingY: 1,
+          marginY: 1,
+          marginX: 1,
+          borderRadius: "sm",
           color: themeTools.mode("darkGrey", "white")(props),
           _hover: {
-            background: themeTools.mode("mint", "darkTeal")(props),
+            backgroundColor: themeTools.mode("seaMist", "darkTeal")(props),
+            outline: "none"
+          },
+          _active: {
+            backgroundColor: themeTools.mode("mint", "darkTeal")(props),
             outline: "none"
           },
           _focus: {
             outline: "none",
-            backgroundColor: themeTools.mode("mint", "darkTeal")(props)
+            backgroundColor: themeTools.mode("seaMist", "darkTeal")(props)
           },
           _selected: {
             backgroundColor: themeTools.mode("pine", "pine")(props),
@@ -23271,7 +23234,6 @@ Object.defineProperty(exports, 'Section', {
   get: function () { return reactStately.Section; }
 });
 exports.tokens = tokens10__namespace;
-exports.Autosuggest = Autosuggest;
 exports.Combobox = Combobox;
 exports.DatePicker = DatePicker;
 exports.DateRangePicker = DateRangePicker;

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Autosuggest, Badge, Box, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, 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, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SelectItem, SelectItemDescription, SelectItemLabel, SimpleDrawer, SimpleGrid, SimplePopover, 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, Tr, TravelTag, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-Z3I6W6PC.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, 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, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SelectItem, SelectItemDescription, SelectItemLabel, SimpleDrawer, SimpleGrid, SimplePopover, 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, Tr, TravelTag, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-7GRTZA6T.mjs';

package/package.json

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

package/src/card/Card.tsx

@@ -25,10 +25,10 @@ export type CardProps = Exclude<BoxProps, "size"> & {
  * </Card>
  * ```
  *
- * There are lots of color schemes available. You can also set the size as either `sm` or `lg`. The default is `lg`.
+ * There are lots of color schemes available. You can also set the size as either `sm` or `lg`. The default is `sm`.
  *
  * ```tsx
- * <Card colorScheme="orange" size="sm">
+ * <Card colorScheme="orange" size="lg">
  *   A smaller card
  * </Card>
  * ```
@@ -45,7 +45,7 @@ export type CardProps = Exclude<BoxProps, "size"> & {
  * ```
  */
 export const Card = forwardRef<CardProps, As>(
-  ({ size = "lg", colorScheme = "white", children, ...props }, ref) => {
+  ({ size = "sm", colorScheme = "white", children, ...props }, ref) => {
     const styles = useStyleConfig("Card", {
       colorScheme,
       size,

package/src/input/Combobox.tsx

@@ -9,6 +9,8 @@ export type ComboboxProps<T> = AriaComboBoxProps<T> & {
   label: string;
   /** Whether or not the combobox is waiting for new suggestions */
   isLoading?: boolean;
+  /** Optional UI to show when there are no matching items */
+  emptyContent?: React.ReactNode;
 } & Pick<
     InputProps,
     | "marginTop"
@@ -75,19 +77,21 @@ export function Combobox<T extends object>({
   paddingLeft,
   paddingX,
   paddingY,
-  onFocus,
+  emptyContent,
   ...rest
 }: ComboboxProps<T>) {
   const { contains } = useFilter({ sensitivity: "base" });
-  const state = useComboBoxState({
-    ...rest,
-    defaultFilter: contains,
-  });
 
   const inputRef = useRef(null);
   const listBoxRef = useRef(null);
   const popoverRef = useRef(null);
 
+  const state = useComboBoxState({
+    ...rest,
+    defaultFilter: contains,
+    allowsEmptyCollection: Boolean(emptyContent),
+  });
+
   const {
     inputProps: { size, ...inputProps },
     listBoxProps,
@@ -107,7 +111,6 @@ export function Combobox<T extends object>({
         {...inputProps}
         ref={inputRef}
         label={label}
-        onFocus={onFocus}
         borderBottomLeftRadius={state.isOpen ? 0 : borderBottomLeftRadius}
         borderBottomRightRadius={state.isOpen ? 0 : borderBottomRightRadius}
         borderTopLeftRadius={borderTopLeftRadius}
@@ -153,7 +156,7 @@ export function Combobox<T extends object>({
             {...listBoxProps}
             state={state}
             listBoxRef={listBoxRef}
-            borderBottomRadius="sm"
+            emptyContent={emptyContent}
           >
             {rest.children}
           </ListBox>

package/src/input/Input.tsx

@@ -10,7 +10,7 @@ import {
 } from "@chakra-ui/react";
 import React, { useId } from "react";
 
-export type InputProps = Exclude<ChakraInputProps, "variant" | "size"> & {
+export type InputProps = Omit<ChakraInputProps, "variant" | "size"> & {
   /** The input's label */
   label: string;
   /** Icon that shows up to the left */
@@ -34,7 +34,7 @@ export type InputProps = Exclude<ChakraInputProps, "variant" | "size"> & {
  * ```
  */
 export const Input = forwardRef<InputProps, "input">(
-  ({ label, leftIcon, rightIcon, id, ...props }, ref) => {
+  ({ label, leftIcon, rightIcon, id, size, ...props }, ref) => {
     const formControlProps = useFormControlContext();
     const fallbackId = `input-${useId()}`;
     const inputId = id ?? formControlProps?.id ?? fallbackId;
@@ -50,9 +50,7 @@ export const Input = forwardRef<InputProps, "input">(
           ref={ref}
           placeholder=" " // This is needed to make the label work as expected
         />
-        <FormLabel htmlFor={inputId} pointerEvents="none">
-          {label}
-        </FormLabel>
+        <FormLabel htmlFor={inputId}>{label}</FormLabel>
         {rightIcon && <InputRightElement>{rightIcon}</InputRightElement>}
       </InputGroup>
     );

package/src/input/ListBox.tsx

@@ -28,6 +28,8 @@ type ListBoxProps<T> = AriaListBoxProps<T> &
     isLoading?: boolean;
     /** The state of the listbox, provided externally somehow. */
     state: ListState<T> | SelectState<T>;
+    /** UI to render if the collection is empty */
+    emptyContent?: React.ReactNode;
   };
 
 /**
@@ -80,6 +82,7 @@ export function ListBox<T extends object>({
       sx={styles.container}
       aria-busy={isLoading}
     >
+      {state.collection.size === 0 && props.emptyContent}
       {Array.from(state.collection).map((item) =>
         item.type === "section" ? (
           <ListBoxSection key={item.key} section={item} state={state} />
@@ -184,19 +187,19 @@ function ListBoxSection({ section, state }: ListBoxSectionProps) {
     "aria-label": section["aria-label"],
   });
 
-  const isFirstSection = section.key !== state.collection.getFirstKey();
-  const titleBackgroundColor = useColorModeValue("platinum", "dimGrey");
+  const isFirstSection = section.key === state.collection.getFirstKey();
   const titleColor = useColorModeValue("darkGrey", "white");
   return (
     <ListItem {...itemProps}>
       {section.rendered && (
         <Box
-          textStyle="xs"
-          backgroundColor={titleBackgroundColor}
+          fontSize="mobile.xs"
           color={titleColor}
           paddingX={3}
           paddingY={1}
-          marginTop={isFirstSection ? 0 : 0}
+          marginTop={isFirstSection ? 0 : 3}
+          textTransform="uppercase"
+          fontWeight="bold"
           {...headingProps}
         >
           {section.rendered}

package/src/input/PasswordInput.tsx

@@ -17,7 +17,7 @@ import { createTexts, useTranslation } from "..";
 
 export type PasswordInputProps = InputProps;
 export const PasswordInput = forwardRef<PasswordInputProps, "input">(
-  ({ leftIcon, id, label, ...props }, ref) => {
+  ({ leftIcon, id, label, size, ...props }, ref) => {
     const { isOpen: isShowingPassword, onToggle } = useDisclosure();
     const { t } = useTranslation();
     const formControlProps = useFormControlContext();

package/src/input/index.tsx

@@ -1,7 +1,6 @@
 export { FormHelperText, InputGroup } from "@chakra-ui/react";
 export type { InputGroupProps } from "@chakra-ui/react";
 export * from "./AttachedInputs";
-export * from "./Autosuggest";
 export * from "./CardSelect";
 export * from "./Checkbox";
 export * from "./CheckboxGroup";

package/src/theme/components/accordion.ts

@@ -136,7 +136,7 @@ const config = helpers.defineMultiStyleConfig({
   },
   defaultProps: {
     variant: "list",
-    size: "md",
+    size: "sm",
   },
 });
 

package/src/theme/components/listbox.ts

@@ -20,18 +20,26 @@ const config = helpers.defineMultiStyleConfig({
       maxHeight: "50vh",
       width: "100%",
       listStyle: "none",
+      borderBottomRadius: "sm",
     },
     item: {
-      paddingX: 3,
-      paddingY: 2,
+      paddingX: 2,
+      paddingY: 1,
+      marginY: 1,
+      marginX: 1,
+      borderRadius: "sm",
       color: mode("darkGrey", "white")(props),
       _hover: {
-        background: mode("mint", "darkTeal")(props),
+        backgroundColor: mode("seaMist", "darkTeal")(props),
+        outline: "none",
+      },
+      _active: {
+        backgroundColor: mode("mint", "darkTeal")(props),
         outline: "none",
       },
       _focus: {
         outline: "none",
-        backgroundColor: mode("mint", "darkTeal")(props),
+        backgroundColor: mode("seaMist", "darkTeal")(props),
       },
       _selected: {
         backgroundColor: mode("pine", "pine")(props),

package/src/input/Autosuggest.tsx

@@ -1,172 +0,0 @@
-import React from "react";
-import { useAsyncList } from "react-stately";
-import { Combobox, ComboboxProps, InputProps } from "../";
-
-type AutosuggestProps<T> = {
-  /** The label of the search field */
-  label: string;
-  /**
-   * The function responsible for fetching new suggestion items, based on the query.
-   *
-   * This will typically be an API call to a backend service.
-   *
-   * @example
-   * ```tsx
-   * const fetcher = async (query?: string) => {
-   *   const response = await fetch(`https://some.api.com/filter=${query}`);
-   *   const json = await response.json();
-   *   return json;
-   * };
-   * ```
-   * */
-  fetcher: (query?: string) => Promise<Iterable<T>>;
-  /**
-   * A render function that receives each item, and returns the UI for each item in the list.
-   *
-   * @example
-   * ```tsx
-   * <Autosuggest {...otherProps}>
-   *  {(user) => (
-   *    <Item key={user.id} textValue={user.fullName}>
-   *       <ItemLabel>{user.fullName}</ItemLabel>
-   *       <ItemDescription>{user.asl}</ItemDescription>
-   *    </Item>
-   *  )}
-   * </Autosuggest>
-   * ```
-   *
-   * You technically don't need to use the `<SelectItemLabel />` and `<SelectItemDescription />` components, but they are recommended to improve the accessibility of the search results. You can style them however you want, so there should never be a reason not to include at least the `<SelectItemLabel />` component. But who's judging?
-   * */
-  children: ComboboxProps<T>["children"];
-  /**
-   * Callback for when the selection changes. Returns the entire item.
-   */
-  onSelectionChange?: (item: T) => void;
-  /** The selected item key (controlled) */
-  selectedKey?: ComboboxProps<T>["selectedKey"];
-  /** What should open the menu.
-   *
-   * Defaults to "input"
-   */
-  menuTrigger?: ComboboxProps<T>["menuTrigger"];
-} & Pick<
-  InputProps,
-  | "marginTop"
-  | "marginBottom"
-  | "marginRight"
-  | "marginLeft"
-  | "marginY"
-  | "marginX"
-  | "paddingTop"
-  | "paddingBottom"
-  | "paddingLeft"
-  | "paddingRight"
-  | "paddingY"
-  | "paddingX"
-  | "leftIcon"
-  | "rightIcon"
-  | "borderTopRightRadius"
-  | "borderTopLeftRadius"
-  | "borderBottomRightRadius"
-  | "borderBottomLeftRadius"
-  | "onFocus"
->;
-/**
- * A component that provides an autocomplete search field with suggestions.
- *
- * This component requires a `fetcher` prop, which is a function that receives a query string, and returns a list of items that match the query.
- *
- * @example
- * ```tsx
- * const fetcher = async (query?: string) => {
- *   const response = await fetch(`https://some.api.vy.no/filter=${query}`);
- *   const json = await response.json();
- *   return json;
- * };
- *
- * const Example = () => {
- *   return (
- *     <Autosuggest
- *       label="Search for users"
- *       fetcher={fetcher}
- *       onSelectionChange={(item) => console.log(item)}
- *     >
- *       {(user) => (
- *         <Item key={user.id} textValue={user.fullName}>
- *           <ItemLabel>{user.fullName}</ItemLabel>
- *           <ItemDescription>{user.asl}</ItemDescription>
- *         </Item>
- *       )}
- *     </Autosuggest>
- *   );
- * };
- * ```
- *
- * The `fetcher` function can be any function that returns an iterable of items. This means that you can use any API library you want, as long as it returns an iterable of items.
- *
- * The items need to have a `key` property, which is used to identify the item. The `key` property can be any type, but it needs to be unique for each item.
- *
- * ```tsx
- * [{ key: 'some-key', ...}, { key: 'some-other-key', ... }]
- * ```
- *
- * You can also return a set of nested items, which will be rendered as a sub-list (or section). This is useful if you want to group your items. These items need to have a title prop (for labelling the section), as well as a `children` prop, which in turn will contain an iterable of items:
- *
- * ```tsx
- * [
- *   {
- *    title: 'The title of the section',
- *    children: [{ key: 'some-key', ... }]
- *   },
- *   {...}
- * ]
- * ```
- *
- * The `onSelectionChanged` will return the correct `item` (the one with the matching `key`), even if the item is in a sub-list.
- */
-export function Autosuggest<T extends object>({
-  label,
-  fetcher,
-  onSelectionChange,
-  ...props
-}: AutosuggestProps<T>) {
-  const list = useAsyncList<T>({
-    async load({ filterText }) {
-      return {
-        items: await fetcher(filterText),
-      };
-    },
-  });
-
-  const handleSelectionChange = (key: React.Key) => {
-    if (!onSelectionChange) {
-      return;
-    }
-
-    let selectedItem = list.getItem(key);
-    if (!selectedItem) {
-      // If the item is not in the list, it might be in a sub-list
-      selectedItem = list.items
-        .flatMap((item) =>
-          "children" in item && Array.isArray(item.children)
-            ? item.children
-            : []
-        )
-        .find((child) => child.key === key);
-    }
-    if (selectedItem) {
-      onSelectionChange(selectedItem);
-    }
-  };
-  return (
-    <Combobox
-      label={label}
-      items={list.items}
-      inputValue={list.filterText}
-      onInputChange={list.setFilterText}
-      onSelectionChange={handleSelectionChange}
-      isLoading={list.isLoading}
-      {...props}
-    />
-  );
-}