@vkontakte/vkui 4.29.1 → 4.32.0

package/src/hooks/useAdaptivity.ts

@@ -3,10 +3,25 @@ import {
   AdaptivityContext,
   AdaptivityProps,
   AdaptivityContextInterface,
+  ViewWidth,
+  ViewHeight,
 } from "../components/AdaptivityProvider/AdaptivityContext";
+import { usePlatform } from "./usePlatform";
+import { VKCOM } from "../lib/platform";
 
 export type { AdaptivityProps };
 
 export const useAdaptivity = (): AdaptivityContextInterface => {
   return React.useContext(AdaptivityContext);
 };
+
+export const useAdaptivityIsDesktop = (): boolean => {
+  const platform = usePlatform();
+  const { viewWidth, viewHeight, hasMouse } = useAdaptivity();
+
+  return (
+    (viewWidth >= ViewWidth.SMALL_TABLET &&
+      (hasMouse || viewHeight >= ViewHeight.MEDIUM)) ||
+    platform === VKCOM
+  );
+};

package/src/hooks/useCalendar.ts

@@ -8,8 +8,13 @@ import {
   isAfter,
   startOfDay,
 } from "../lib/date";
+import { CalendarProps } from "../components/Calendar/Calendar";
 
-export interface UseCalendarDependencies {
+export interface UseCalendarDependencies
+  extends Pick<
+    CalendarProps,
+    "onHeaderChange" | "onNextMonth" | "onPrevMonth"
+  > {
   value?: Array<Date | null> | Date;
   disablePast?: boolean;
   disableFuture?: boolean;
@@ -21,19 +26,30 @@ export function useCalendar({
   disablePast,
   disableFuture,
   shouldDisableDate,
+  onHeaderChange,
+  onNextMonth,
+  onPrevMonth,
 }: UseCalendarDependencies) {
   const [viewDate, setViewDate] = React.useState(
     (Array.isArray(value) ? value[0] : value) ?? new Date()
   );
   const [focusedDay, setFocusedDay] = React.useState<Date>();
 
-  const setPrevMonth = React.useCallback(
-    () => setViewDate(subMonths(viewDate, 1)),
-    [viewDate]
-  );
-  const setNextMonth = React.useCallback(
-    () => setViewDate(addMonths(viewDate, 1)),
-    [viewDate]
+  const setPrevMonth = React.useCallback(() => {
+    onPrevMonth?.();
+    setViewDate(subMonths(viewDate, 1));
+  }, [viewDate, onPrevMonth]);
+  const setNextMonth = React.useCallback(() => {
+    onNextMonth?.();
+    setViewDate(addMonths(viewDate, 1));
+  }, [viewDate, onNextMonth]);
+
+  const handleSetViewDate = React.useCallback(
+    (value: Date) => {
+      onHeaderChange?.(value);
+      setViewDate(value);
+    },
+    [onHeaderChange]
   );
 
   const isDayFocused = React.useCallback(
@@ -66,7 +82,7 @@ export function useCalendar({
 
   return {
     viewDate,
-    setViewDate,
+    setViewDate: handleSetViewDate,
     setPrevMonth,
     setNextMonth,
     focusedDay,

package/src/hooks/useKeyboard.ts

@@ -4,7 +4,6 @@ import { useGlobalEventListener } from "./useGlobalEventListener";
 
 interface SoftwareKeyboardState {
   isOpened: boolean;
-  isPrecise: boolean;
 }
 
 /**
@@ -29,35 +28,19 @@ const eventOptions = {
 };
 
 export function useKeyboard(): SoftwareKeyboardState {
-  const { window, document } = useDOM();
+  const { document } = useDOM();
 
   const [isOpened, setIsOpened] = React.useState(false);
-  const [isPrecise, setIsPrecise] = React.useState(false);
-
-  const transitionalTimeout = React.useRef<ReturnType<
-    typeof setTimeout
-  > | null>(null);
 
   const onFocus = React.useCallback(
     (event: FocusEvent | true) => {
-      if (transitionalTimeout.current) {
-        clearTimeout(transitionalTimeout.current);
-      }
-
       const isOpened =
         (event === true || event.type === "focusin") &&
         (document?.activeElement?.tagName === "INPUT" ||
           document?.activeElement?.tagName === "TEXTAREA");
       setIsOpened(isOpened);
-      setIsPrecise(false);
-
-      // Ожидаем прохождение анимации раскрытия клавиатуры
-      transitionalTimeout.current = setTimeout(() => {
-        setIsOpened(isOpened);
-        setIsPrecise(getPreciseKeyboardState(window));
-      }, 300);
     },
-    [document?.activeElement?.tagName, window]
+    [document?.activeElement?.tagName]
   );
 
   /**
@@ -71,5 +54,5 @@ export function useKeyboard(): SoftwareKeyboardState {
   useGlobalEventListener(document, "focusout", onFocus, eventOptions);
   useGlobalEventListener(document, "focusin", onFocus, eventOptions);
 
-  return { isOpened, isPrecise };
+  return { isOpened };
 }

package/src/hooks/usePrevious.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+
+export function usePrevious<T>(value: T): T | undefined {
+  const ref = React.useRef<T | undefined>();
+
+  React.useEffect(() => {
+    ref.current = value;
+  });
+
+  return ref.current;
+}

package/src/hooks/useWaitTransitionFinish.ts

@@ -6,27 +6,30 @@ export const useWaitTransitionFinish = () => {
   const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
   const { document } = useDOM();
 
-  const waitTransitionFinish = (
-    element: HTMLElement | null,
-    eventHandler: VoidFunction,
-    durationFallback: number
-  ) => {
-    if (element) {
-      if (
-        !document?.hidden &&
-        transitionEvent.supported &&
-        transitionEvent.name
-      ) {
-        element.removeEventListener(transitionEvent.name, eventHandler);
-        element.addEventListener(transitionEvent.name, eventHandler);
-      } else {
-        if (timeoutRef?.current) {
-          clearTimeout(timeoutRef.current);
+  const waitTransitionFinish = React.useCallback(
+    (
+      element: HTMLElement | null,
+      eventHandler: VoidFunction,
+      durationFallback: number
+    ) => {
+      if (element) {
+        if (
+          !document?.hidden &&
+          transitionEvent.supported &&
+          transitionEvent.name
+        ) {
+          element.removeEventListener(transitionEvent.name, eventHandler);
+          element.addEventListener(transitionEvent.name, eventHandler);
+        } else {
+          if (timeoutRef?.current) {
+            clearTimeout(timeoutRef.current);
+          }
+          timeoutRef.current = setTimeout(eventHandler, durationFallback);
         }
-        timeoutRef.current = setTimeout(eventHandler, durationFallback);
       }
-    }
-  };
+    },
+    [document, timeoutRef]
+  );
 
   return {
     waitTransitionFinish,

package/src/index.ts

@@ -15,7 +15,7 @@ export { Panel } from "./components/Panel/Panel";
 export type { PanelProps } from "./components/Panel/Panel";
 export { PanelHeaderButton } from "./components/PanelHeaderButton/PanelHeaderButton";
 export type { PanelHeaderButtonProps } from "./components/PanelHeaderButton/PanelHeaderButton";
-export { default as PanelHeader } from "./components/PanelHeader/PanelHeader";
+export { PanelHeader } from "./components/PanelHeader/PanelHeader";
 export type { PanelHeaderProps } from "./components/PanelHeader/PanelHeader";
 export { default as PanelHeaderContent } from "./components/PanelHeaderContent/PanelHeaderContent";
 export type { PanelHeaderContentProps } from "./components/PanelHeaderContent/PanelHeaderContent";
@@ -64,7 +64,7 @@ export { withModalRootContext } from "./components/ModalRoot/withModalRootContex
 export { default as ModalRootContext } from "./components/ModalRoot/ModalRootContext";
 export { default as ModalPage } from "./components/ModalPage/ModalPage";
 export type { ModalPageProps } from "./components/ModalPage/ModalPage";
-export { default as ModalPageHeader } from "./components/ModalPageHeader/ModalPageHeader";
+export { ModalPageHeader } from "./components/ModalPageHeader/ModalPageHeader";
 export type { ModalPageHeaderProps } from "./components/ModalPageHeader/ModalPageHeader";
 export { default as ModalCard } from "./components/ModalCard/ModalCard";
 export type { ModalCardProps } from "./components/ModalCard/ModalCard";
@@ -109,7 +109,7 @@ export { HorizontalCell } from "./components/HorizontalCell/HorizontalCell";
 export type { HorizontalCellProps } from "./components/HorizontalCell/HorizontalCell";
 export { Footer } from "./components/Footer/Footer";
 export type { FooterProps } from "./components/Footer/Footer";
-export { default as InfoRow } from "./components/InfoRow/InfoRow";
+export { InfoRow } from "./components/InfoRow/InfoRow";
 export type { InfoRowProps } from "./components/InfoRow/InfoRow";
 export { default as Gallery } from "./components/Gallery/Gallery";
 export type { GalleryProps } from "./components/Gallery/Gallery";
@@ -119,7 +119,7 @@ export { GridAvatar } from "./components/GridAvatar/GridAvatar";
 export type { GridAvatarProps } from "./components/GridAvatar/GridAvatar";
 export { InitialsAvatar } from "./components/InitialsAvatar/InitialsAvatar";
 export type { InitialsAvatarProps } from "./components/InitialsAvatar/InitialsAvatar";
-export { default as Progress } from "./components/Progress/Progress";
+export { Progress } from "./components/Progress/Progress";
 export type { ProgressProps } from "./components/Progress/Progress";
 export { default as Search } from "./components/Search/Search";
 export type { SearchProps } from "./components/Search/Search";
@@ -127,20 +127,20 @@ export { default as Tabs } from "./components/Tabs/Tabs";
 export type { TabsProps } from "./components/Tabs/Tabs";
 export { default as TabsItem } from "./components/TabsItem/TabsItem";
 export type { TabsItemProps } from "./components/TabsItem/TabsItem";
-export { default as Spinner } from "./components/Spinner/Spinner";
+export { Spinner } from "./components/Spinner/Spinner";
 export type { SpinnerProps } from "./components/Spinner/Spinner";
-export { default as PullToRefresh } from "./components/PullToRefresh/PullToRefresh";
+export { PullToRefresh } from "./components/PullToRefresh/PullToRefresh";
 export type { PullToRefreshProps } from "./components/PullToRefresh/PullToRefresh";
 export { default as Link } from "./components/Link/Link";
 export type { LinkProps } from "./components/Link/Link";
 export { default as Tooltip } from "./components/Tooltip/Tooltip";
 export type { TooltipProps } from "./components/Tooltip/Tooltip";
 export { TooltipContainer } from "./components/Tooltip/TooltipContainer";
-export { default as Counter } from "./components/Counter/Counter";
+export { Counter } from "./components/Counter/Counter";
 export type { CounterProps } from "./components/Counter/Counter";
 export { default as UsersStack } from "./components/UsersStack/UsersStack";
 export type { UsersStackProps } from "./components/UsersStack/UsersStack";
-export { default as Separator } from "./components/Separator/Separator";
+export { Separator } from "./components/Separator/Separator";
 export type { SeparatorProps } from "./components/Separator/Separator";
 export { Spacing } from "./components/Spacing/Spacing";
 export type { SpacingProps } from "./components/Spacing/Spacing";
@@ -176,7 +176,7 @@ export { FormStatus } from "./components/FormStatus/FormStatus";
 export type { FormStatusProps } from "./components/FormStatus/FormStatus";
 export { Switch } from "./components/Switch/Switch";
 export type { SwitchProps } from "./components/Switch/Switch";
-export { default as File } from "./components/File/File";
+export { File } from "./components/File/File";
 export type { FileProps } from "./components/File/File";
 export { Input } from "./components/Input/Input";
 export type { InputProps } from "./components/Input/Input";
@@ -190,7 +190,7 @@ export { default as RangeSlider } from "./components/RangeSlider/RangeSlider";
 export type { RangeSliderProps } from "./components/RangeSlider/RangeSlider";
 export { default as Textarea } from "./components/Textarea/Textarea";
 export type { TextareaProps } from "./components/Textarea/Textarea";
-export { default as Radio } from "./components/Radio/Radio";
+export { Radio } from "./components/Radio/Radio";
 export type { RadioProps } from "./components/Radio/Radio";
 export { RadioGroup } from "./components/RadioGroup/RadioGroup";
 export type { RadioGroupProps } from "./components/RadioGroup/RadioGroup";
@@ -198,7 +198,7 @@ export { default as Checkbox } from "./components/Checkbox/Checkbox";
 export type { CheckboxProps } from "./components/Checkbox/Checkbox";
 export { Select } from "./components/Select/Select";
 export type { SelectProps } from "./components/Select/Select";
-export { default as SelectMimicry } from "./components/SelectMimicry/SelectMimicry";
+export { SelectMimicry } from "./components/SelectMimicry/SelectMimicry";
 export type { SelectMimicryProps } from "./components/SelectMimicry/SelectMimicry";
 export { NativeSelect } from "./components/NativeSelect/NativeSelect";
 export type { NativeSelectProps } from "./components/NativeSelect/NativeSelect";
@@ -243,7 +243,7 @@ export { default as Tappable } from "./components/Tappable/Tappable";
 export type { TappableProps } from "./components/Tappable/Tappable";
 export { Touch } from "./components/Touch/Touch";
 export type { TouchProps } from "./components/Touch/Touch";
-export { default as PanelSpinner } from "./components/PanelSpinner/PanelSpinner";
+export { PanelSpinner } from "./components/PanelSpinner/PanelSpinner";
 export type { PanelSpinnerProps } from "./components/PanelSpinner/PanelSpinner";
 export { default as PanelHeaderClose } from "./components/PanelHeaderClose/PanelHeaderClose";
 export { default as PanelHeaderBack } from "./components/PanelHeaderBack/PanelHeaderBack";
@@ -282,16 +282,18 @@ export type { PromoBannerProps } from "./components/PromoBanner/PromoBanner";
  */
 export { Title } from "./components/Typography/Title/Title";
 export type { TitleProps } from "./components/Typography/Title/Title";
-export { default as Headline } from "./components/Typography/Headline/Headline";
+export { Headline } from "./components/Typography/Headline/Headline";
 export type { HeadlineProps } from "./components/Typography/Headline/Headline";
-export { default as Text } from "./components/Typography/Text/Text";
+export { Text } from "./components/Typography/Text/Text";
 export type { TextProps } from "./components/Typography/Text/Text";
-export { Caption } from "./components/Typography/Caption/Caption";
-export type { CaptionProps } from "./components/Typography/Caption/Caption";
-export { Subhead } from "./components/Typography/Subhead/Subhead";
-export type { SubheadProps } from "./components/Typography/Subhead/Subhead";
 export { Paragraph } from "./components/Typography/Paragraph/Paragraph";
 export type { ParagraphProps } from "./components/Typography/Paragraph/Paragraph";
+export { Subhead } from "./components/Typography/Subhead/Subhead";
+export type { SubheadProps } from "./components/Typography/Subhead/Subhead";
+export { Footnote } from "./components/Typography/Footnote/Footnote";
+export type { FootnoteProps } from "./components/Typography/Footnote/Footnote";
+export { Caption } from "./components/Typography/Caption/Caption";
+export type { CaptionProps } from "./components/Typography/Caption/Caption";
 
 /**
  * HOCs
@@ -308,6 +310,8 @@ export { usePlatform } from "./hooks/usePlatform";
 export { useAdaptivity } from "./hooks/useAdaptivity";
 export { useAppearance } from "./hooks/useAppearance";
 export { usePagination } from "./hooks/usePagination";
+export { useScrollLock } from "./components/AppRoot/ScrollContext";
+export { useNavTransition } from "./components/NavTransitionContext/NavTransitionContext";
 
 /**
  * Utils
@@ -343,3 +347,4 @@ export type { AlignType, HasPlatform, HasInsets } from "./types";
 export type { NavIdProps } from "./lib/getNavId";
 export type { PlatformType } from "./lib/platform";
 export type { AdaptivityProps } from "./hoc/withAdaptivity";
+export type { TransitionContextProps } from "./components/NavTransitionContext/NavTransitionContext";

package/src/lib/SSR.tsx

@@ -20,6 +20,9 @@ export interface SSRWrapperProps {
   browserInfo?: BrowserInfo;
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/SSR
+ */
 export const SSRWrapper: React.FC<SSRWrapperProps> = (props) => {
   let { userAgent, browserInfo, children } = props;
 

package/src/lib/select.ts

@@ -1,10 +1,13 @@
+import * as React from "react";
+import { getTitleFromChildren } from "./utils";
+import { FormFieldMode } from "../components/FormField/FormField";
+import { SelectType } from "../components/Select/Select";
+
 type Option = {
-  label?: string;
+  label?: React.ReactElement | string;
   [index: string]: any;
 };
 
-type GetOptionLabel = (option: Option) => string | undefined;
-
 const findAllIncludes = (target = "", search = "") => {
   const includes = [];
 
@@ -24,10 +27,15 @@ try {
   letterRegexp = new RegExp("\\p{L}", "u");
 } catch (e) {}
 
+type GetOptionLabel = (option: Option) => string | undefined;
+
+const _getOptionLabel: GetOptionLabel = (option) =>
+  getTitleFromChildren(option.label);
+
 export const defaultFilterFn = (
   query = "",
   option: Option,
-  getOptionLabel: GetOptionLabel = (option) => option.label
+  getOptionLabel: GetOptionLabel = _getOptionLabel
 ) => {
   query = query.toLocaleLowerCase();
   let label = getOptionLabel(option)?.toLocaleLowerCase();
@@ -52,3 +60,11 @@ export const defaultFilterFn = (
 
   return false;
 };
+
+export const getFormFieldModeFromSelectType = (
+  selectType: keyof typeof SelectType = SelectType.default
+) => {
+  return selectType === SelectType.default
+    ? FormFieldMode.default
+    : FormFieldMode.plain;
+};

package/src/styles/components.css

@@ -10,10 +10,11 @@
 /* Typography */
 @import "../components/Typography/Title/Title.css";
 @import "../components/Typography/Headline/Headline.css";
-@import "../components/Typography/Subhead/Subhead.css";
-@import "../components/Typography/Caption/Caption.css";
 @import "../components/Typography/Text/Text.css";
 @import "../components/Typography/Paragraph/Paragraph.css";
+@import "../components/Typography/Subhead/Subhead.css";
+@import "../components/Typography/Footnote/Footnote.css";
+@import "../components/Typography/Caption/Caption.css";
 
 /* Service */
 @import "../components/Tappable/Tappable.css";
@@ -121,10 +122,8 @@
 @import "../components/Chip/Chip.css";
 @import "../components/Select/Select.css";
 @import "../components/Textarea/Textarea.css";
-@import "../components/File/File.css";
 @import "../components/CustomScrollView/CustomScrollView.css";
 @import "../components/CustomSelect/CustomSelect.css";
-@import "../components/SelectMimicry/SelectMimicry.css";
 @import "../components/CustomSelectOption/CustomSelectOption.css";
 @import "../components/DatePicker/DatePicker.css";
 @import "../components/SliderSwitch/SliderSwitch.css";

package/src/styles/constants.css

@@ -23,15 +23,14 @@
 
   /* sizes */
   --tabbar_height: 48px;
+  --panelheader_height: 56px;
   --panelheader_height_ios: 52px;
-  --panelheader_height_android: 56px;
   --panelheader_height_vkcom: 48px;
-  --modalheader_height_ios: 52px;
-  --modalheader_height_android: 56px;
   --search_default_height: 36px;
   --thin-border: 1px;
 
   /* paddings */
+  /* TODO: v5 удалить */
   --formitem_padding: 16px;
 
   /* colors */

package/src/styles/themes.css

@@ -3,6 +3,7 @@
 @import "./vkcom_light.css";
 @import "./vkcom_dark.css";
 @import "../../node_modules/@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/onlyVariables.css";
+@import "../../node_modules/@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/onlyVariablesLocal.css";
 @import "../../node_modules/@vkontakte/vkui-tokens/themes/vkBaseDark/cssVars/declarations/onlyVariablesLocal.css";
 @import "../../node_modules/@vkontakte/vkui-tokens/themes/vkIOS/cssVars/declarations/onlyVariablesLocal.css";
 @import "../../node_modules/@vkontakte/vkui-tokens/themes/vkIOSDark/cssVars/declarations/onlyVariablesLocal.css";

package/src/testing/utils.tsx

@@ -142,12 +142,19 @@ export const mockScrollContext = (
 ): [React.FC, jest.Mock] => {
   const getScroll = () => ({ x: 0, y: getY() });
   const scrollTo = jest.fn();
+  const isScrollLock = false;
   const enableScrollLock = jest.fn();
   const disableScrollLock = jest.fn();
   return [
     (props) => (
       <ScrollContext.Provider
-        value={{ getScroll, scrollTo, enableScrollLock, disableScrollLock }}
+        value={{
+          getScroll,
+          scrollTo,
+          isScrollLock,
+          enableScrollLock,
+          disableScrollLock,
+        }}
       >
         {props.children}
       </ScrollContext.Provider>

package/src/tokenized/index.ts

@@ -10,9 +10,24 @@ export type { CardScrollProps } from "../components/CardScroll/CardScroll";
 export { HorizontalScroll } from "../components/HorizontalScroll/HorizontalScroll";
 export type { HorizontalScrollProps } from "../components/HorizontalScroll/HorizontalScroll";
 
+export { InfoRow } from "../components/InfoRow/InfoRow";
+export type { InfoRowProps } from "../components/InfoRow/InfoRow";
+
 export { ButtonGroup } from "../components/ButtonGroup/ButtonGroup";
 export type { ButtonGroupProps } from "../components/ButtonGroup/ButtonGroup";
 
+export { Switch } from "../components/Switch/Switch";
+export type { SwitchProps } from "../components/Switch/Switch";
+
+export { Footnote } from "../components/Typography/Footnote/Footnote";
+export type { FootnoteProps } from "../components/Typography/Footnote/Footnote";
+
+export { Radio } from "../components/Radio/Radio";
+export type { RadioProps } from "../components/Radio/Radio";
+
+export { RadioGroup } from "../components/RadioGroup/RadioGroup";
+export type { RadioGroupProps } from "../components/RadioGroup/RadioGroup";
+
 export { SegmentedControl } from "../components/SegmentedControl/SegmentedControl";
 export type {
   SegmentedControlProps,
@@ -38,18 +53,33 @@ export type { CalendarRangeProps } from "../components/CalendarRange/CalendarRan
 export { Caption } from "../components/Typography/Caption/Caption";
 export type { CaptionProps } from "../components/Typography/Caption/Caption";
 
+export { PanelSpinner } from "../components/PanelSpinner/PanelSpinner";
+export type { PanelSpinnerProps } from "../components/PanelSpinner/PanelSpinner";
+
 export { Paragraph } from "../components/Typography/Paragraph/Paragraph";
 export type { ParagraphProps } from "../components/Typography/Paragraph/Paragraph";
 
+export { Text } from "../components/Typography/Text/Text";
+export type { TextProps } from "../components/Typography/Text/Text";
+
+export { PullToRefresh } from "../components/PullToRefresh/PullToRefresh";
+export type { PullToRefreshProps } from "../components/PullToRefresh/PullToRefresh";
+
 export { Input } from "../components/Input/Input";
 export type { InputProps } from "../components/Input/Input";
 
+export { File } from "../components/File/File";
+export type { FileProps } from "../components/File/File";
+
 export { FormField } from "../components/FormField/FormField";
 export type { FormFieldProps } from "../components/FormField/FormField";
 
 export { Select } from "../components/Select/Select";
 export type { SelectProps } from "../components/Select/Select";
 
+export { Spinner } from "../components/Spinner/Spinner";
+export type { SpinnerProps } from "../components/Spinner/Spinner";
+
 export { CustomSelect } from "../components/CustomSelect/CustomSelect";
 export type { CustomSelectProps } from "../components/CustomSelect/CustomSelect";
 
@@ -59,8 +89,38 @@ export type { CustomSelectDropdownProps } from "../components/CustomSelectDropdo
 export { CustomSelectOption } from "../components/CustomSelectOption/CustomSelectOption";
 export type { CustomSelectOptionProps } from "../components/CustomSelectOption/CustomSelectOption";
 
+export { Chip } from "../components/Chip/Chip";
+export type { ChipProps } from "../components/Chip/Chip";
+
 export { ChipsInput } from "../components/ChipsInput/ChipsInput";
 export type { ChipsInputProps } from "../components/ChipsInput/ChipsInput";
 
 export { ChipsSelect } from "../components/ChipsSelect/ChipsSelect";
 export type { ChipsSelectProps } from "../components/ChipsSelect/ChipsSelect";
+
+export { SplitCol } from "../components/SplitCol/SplitCol";
+export type { SplitColProps } from "../components/SplitCol/SplitCol";
+
+export { Headline } from "../components/Typography/Headline/Headline";
+export type { HeadlineProps } from "../components/Typography/Headline/Headline";
+
+export { Div } from "../components/Div/Div";
+export type { DivProps } from "../components/Div/Div";
+
+export { Counter } from "../components/Counter/Counter";
+export type { CounterProps } from "../components/Counter/Counter";
+
+export { Progress } from "../components/Progress/Progress";
+export type { ProgressProps } from "../components/Progress/Progress";
+
+export { DateInput } from "../components/DateInput/DateInput";
+export type { DateInputProps } from "../components/DateInput/DateInput";
+
+export { Badge } from "../components/Badge/Badge";
+export type { BadgeProps } from "../components/Badge/Badge";
+
+export { DateRangeInput } from "../components/DateRangeInput/DateRangeInput";
+export type { DateRangeInputProps } from "../components/DateRangeInput/DateRangeInput";
+
+export { Footer } from "../components/Footer/Footer";
+export type { FooterProps } from "../components/Footer/Footer";