@ecohouse/ui 0.1.33 → 0.1.35

package/src/components/ContactInfoCard/ContactInfoCard.tsx

@@ -0,0 +1,141 @@
+import { forwardRef, useMemo, useRef, type ComponentRef } from "react";
+import {
+  StyleSheet,
+  Text,
+  useWindowDimensions,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import type { IconComponent, IconProps } from "../../icons";
+import { colors, fonts } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export interface ContactInfoCardProps extends Omit<ViewProps, "style" | "children"> {
+  title: string;
+  value: string;
+  icon: IconComponent;
+  iconProps?: Omit<IconProps, "size">;
+  iconSize?: number;
+  /** Icon slot fill. Defaults to `#E38E5E0F`. */
+  iconSlotBackgroundColor?: string;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+}
+
+const DESKTOP_MIN_WIDTH = 1024;
+const CARD_HEIGHT_MOBILE = 78;
+const CARD_HEIGHT_DESKTOP = 96;
+const CARD_PADDING_MOBILE = 16;
+const CARD_PADDING_DESKTOP = 24;
+const CARD_GAP_MOBILE = 16;
+const CARD_GAP_DESKTOP = 24;
+const ICON_SLOT = 48;
+const ICON_SIZE = 24;
+const ICON_SLOT_BG = "#E38E5E0F";
+const ICON_COLOR = "#B76533";
+
+/**
+ * Support contact strip — icon slot + title/value.
+ * Mobile: height 78, padding 16, gap 16, radius 20.
+ * Desktop: height 96, padding 24, gap 24, radius 20.
+ */
+export const ContactInfoCard = forwardRef<ComponentRef<typeof View>, ContactInfoCardProps>(
+  function ContactInfoCard(
+    {
+      title,
+      value,
+      icon: Icon,
+      iconProps,
+      iconSize = ICON_SIZE,
+      iconSlotBackgroundColor = ICON_SLOT_BG,
+      style,
+      className,
+      accessibilityLabel,
+      ...rest
+    },
+    forwardedRef,
+  ) {
+    const containerRef = useRef<ComponentRef<typeof View>>(null);
+    const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+    const { width: viewportWidth } = useWindowDimensions();
+    const isDesktop = viewportWidth >= DESKTOP_MIN_WIDTH;
+
+    useApplyWebClassName(containerRef, className);
+
+    return (
+      <View
+        {...rest}
+        ref={setContainerRef}
+        accessibilityRole="text"
+        accessibilityLabel={accessibilityLabel ?? `${title}. ${value}`}
+        style={[
+          styles.root,
+          {
+            height: isDesktop ? CARD_HEIGHT_DESKTOP : CARD_HEIGHT_MOBILE,
+            gap: isDesktop ? CARD_GAP_DESKTOP : CARD_GAP_MOBILE,
+            padding: isDesktop ? CARD_PADDING_DESKTOP : CARD_PADDING_MOBILE,
+          },
+          style,
+        ]}
+      >
+        <View style={[styles.iconSlot, { backgroundColor: iconSlotBackgroundColor }]}>
+          <Icon
+            {...iconProps}
+            size={iconSize}
+            color={iconProps?.color ?? ICON_COLOR}
+            strokeWidth={iconProps?.strokeWidth ?? 2}
+          />
+        </View>
+        <View style={styles.textBlock}>
+          <Text style={styles.title}>{title}</Text>
+          <Text style={styles.value}>{value}</Text>
+        </View>
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  root: {
+    width: "100%",
+    flexDirection: "row",
+    alignItems: "center",
+    borderRadius: 20,
+    backgroundColor: colors.grey750,
+    opacity: 1,
+  },
+  iconSlot: {
+    width: ICON_SLOT,
+    height: ICON_SLOT,
+    padding: 12,
+    borderRadius: 12,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+  },
+  textBlock: {
+    flexShrink: 1,
+    minWidth: 0,
+    flexDirection: "column",
+    gap: 8,
+  },
+  title: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "600",
+    lineHeight: 14,
+    letterSpacing: 0.42,
+    color: colors.white,
+  },
+  value: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "400",
+    lineHeight: 14,
+    letterSpacing: 0.42,
+    color: colors.lightGrey,
+  },
+});

package/src/components/ContactInfoCard/index.ts

@@ -0,0 +1,2 @@
+export { ContactInfoCard } from "./ContactInfoCard";
+export type { ContactInfoCardProps } from "./ContactInfoCard";

package/src/components/DatePicker/DatePicker.tsx

@@ -119,15 +119,24 @@ export type DatePickerRangeProps = DatePickerBaseProps & {
 
 export type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
 
-const DEFAULT_WIDTH = 380;
+const DEFAULT_WIDTH = 320;
+const DEFAULT_MENU_HEIGHT = 388;
+const MENU_CONTENT_WIDTH = 296;
 const RANGE_TRIGGER_WIDTH = 382;
 const TRIGGER_HEIGHT = 44;
 const TRIGGER_RADIUS = 60;
 const MENU_RADIUS = 20;
+const MENU_PADDING = 12;
 const ICON_SIZE = 20;
 const NAV_ICON_SIZE = 20;
+const HEADER_HEIGHT = 36;
+const WEEKDAY_ROW_HEIGHT = 44;
+const WEEKDAY_ROW_GAP = 8;
+const WEEK_ROW_GAP = 16;
+const DAY_CELL_WIDTH = 42.28571701049805;
 const DAY_CELL_HEIGHT = 44;
-const DAY_CIRCLE_SIZE = 44;
+const DAY_CELL_RADIUS = 67;
+const DAY_CELL_PADDING = 12;
 
 function RangeTriggerField({
   label,
@@ -507,7 +516,7 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
               <View>
                 <View style={styles.weekdayRow}>
                   {weekdayLabels.map((weekdayLabel, index) => (
-                    <View key={`${weekdayLabel}-${index}`} style={styles.dayCellWrap}>
+                    <View key={`${weekdayLabel}-${index}`} style={styles.weekdayCell}>
                       <Text style={styles.weekdayText}>{weekdayLabel}</Text>
                     </View>
                   ))}
@@ -751,12 +760,15 @@ const styles = StyleSheet.create({
     position: "absolute",
     top: "100%",
     width: DEFAULT_WIDTH,
+    height: DEFAULT_MENU_HEIGHT,
     marginTop: 8,
     zIndex: 10,
     borderRadius: MENU_RADIUS,
-    padding: 12,
+    padding: MENU_PADDING,
     gap: 0,
+    opacity: 1,
     backgroundColor: colors.grey700,
+    overflow: "hidden",
     ...Platform.select({
       web: {
         boxShadow: `0 8px 24px ${colors.black}73`,
@@ -785,14 +797,17 @@ const styles = StyleSheet.create({
     width: RANGE_TRIGGER_WIDTH,
   },
   calendarHeader: {
-    height: 36,
+    height: HEADER_HEIGHT,
+    paddingTop: 8,
+    paddingBottom: 8,
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
+    opacity: 1,
   },
   navButton: {
-    width: 36,
-    height: 36,
+    width: HEADER_HEIGHT,
+    height: HEADER_HEIGHT,
     alignItems: "center",
     justifyContent: "center",
   },
@@ -805,7 +820,21 @@ const styles = StyleSheet.create({
     textAlign: "center",
   },
   weekdayRow: {
+    width: MENU_CONTENT_WIDTH,
+    height: WEEKDAY_ROW_HEIGHT,
+    marginTop: WEEKDAY_ROW_GAP,
     flexDirection: "row",
+    alignItems: "center",
+    opacity: 1,
+  },
+  weekdayCell: {
+    width: DAY_CELL_WIDTH,
+    height: WEEKDAY_ROW_HEIGHT,
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: 0,
+    alignItems: "center",
+    justifyContent: "center",
   },
   weekdayText: {
     ...datePickerTypography.weekday,
@@ -814,29 +843,36 @@ const styles = StyleSheet.create({
     textTransform: "uppercase",
   },
   weekRow: {
+    width: MENU_CONTENT_WIDTH,
     flexDirection: "row",
     position: "relative",
   },
   weekRowSpaced: {
-    marginTop: 8,
+    marginTop: WEEK_ROW_GAP,
   },
   rangeHighlight: {
     position: "absolute",
-    top: (DAY_CELL_HEIGHT - DAY_CIRCLE_SIZE) / 2,
-    bottom: (DAY_CELL_HEIGHT - DAY_CIRCLE_SIZE) / 2,
-    borderRadius: DAY_CIRCLE_SIZE / 2,
+    top: 0,
+    bottom: 0,
+    borderRadius: DAY_CELL_RADIUS,
     backgroundColor: colors.primaryHover,
   },
   dayCellWrap: {
-    flex: 1,
+    width: DAY_CELL_WIDTH,
     height: DAY_CELL_HEIGHT,
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: 0,
     alignItems: "center",
     justifyContent: "center",
+    opacity: 1,
   },
   dayCircle: {
-    width: DAY_CIRCLE_SIZE,
-    height: DAY_CIRCLE_SIZE,
-    borderRadius: DAY_CIRCLE_SIZE / 2,
+    width: "100%",
+    height: "100%",
+    borderRadius: DAY_CELL_RADIUS,
+    padding: DAY_CELL_PADDING,
+    gap: 10,
     alignItems: "center",
     justifyContent: "center",
   },

package/src/components/Input/Input.tsx

@@ -1,6 +1,7 @@
-import { forwardRef, useMemo, useRef, useState, type ComponentRef } from "react";
+import { forwardRef, useId, useMemo, useRef, useState, type ComponentRef } from "react";
 import {
   Platform,
+  Pressable,
   StyleSheet,
   Text,
   TextInput,
@@ -183,6 +184,8 @@ export const Input = forwardRef<ComponentRef<typeof TextInput>, InputProps>(func
   const [focused, setFocused] = useState(false);
   const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? "");
   const metrics = sizeConfig[size];
+  const reactId = useId();
+  const inputDomId = `eh-input-${reactId.replace(/:/g, "")}`;
 
   const isControlled = typeof value === "string";
   const currentValue = isControlled ? value : uncontrolledValue;
@@ -204,31 +207,44 @@ export const Input = forwardRef<ComponentRef<typeof TextInput>, InputProps>(func
     color: chrome.rightIconColor,
   });
 
+  const focusInput = () => {
+    if (disabled) return;
+    inputRef.current?.focus();
+  };
+
   useApplyWebClassName(rootRef, className);
   useApplyWebClassName(inputRef, inputClassName);
 
+  const fieldChromeStyle = [
+    styles.field,
+    {
+      height: metrics.height,
+      borderRadius: metrics.borderRadius,
+      paddingTop: metrics.paddingVertical,
+      paddingBottom: metrics.paddingVertical,
+      paddingLeft: metrics.paddingHorizontal,
+      paddingRight: metrics.paddingHorizontal,
+      gap: metrics.gap,
+      borderColor: chrome.borderColor,
+      backgroundColor: chrome.backgroundColor,
+    },
+    Platform.OS === "web" ? styles.fieldWeb : null,
+    fieldStyle,
+  ];
+
   return (
     <View ref={rootRef} style={[styles.root, disabled && styles.disabled, style]}>
       {showLabel && label ? (
-        <Text style={[styles.label, { color: chrome.labelColor }]}>{label}</Text>
+        <Pressable disabled={disabled} onPress={focusInput} style={styles.labelPressable}>
+          <Text style={[styles.label, { color: chrome.labelColor }]}>{label}</Text>
+        </Pressable>
       ) : null}
 
-      <View
-        style={[
-          styles.field,
-          {
-            height: metrics.height,
-            borderRadius: metrics.borderRadius,
-            paddingTop: metrics.paddingVertical,
-            paddingBottom: metrics.paddingVertical,
-            paddingLeft: metrics.paddingHorizontal,
-            paddingRight: metrics.paddingHorizontal,
-            gap: metrics.gap,
-            borderColor: chrome.borderColor,
-            backgroundColor: chrome.backgroundColor,
-          },
-          fieldStyle,
-        ]}
+      <Pressable
+        accessibilityRole="none"
+        disabled={disabled}
+        onPress={focusInput}
+        style={fieldChromeStyle}
       >
         {hasLeftIcon ? (
           <View style={[styles.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }]}>
@@ -239,6 +255,7 @@ export const Input = forwardRef<ComponentRef<typeof TextInput>, InputProps>(func
         <TextInput
           ref={setInputRef}
           {...textInputProps}
+          nativeID={inputDomId}
           value={isControlled ? value : undefined}
           defaultValue={isControlled ? undefined : defaultValue}
           editable={!disabled}
@@ -281,12 +298,17 @@ export const Input = forwardRef<ComponentRef<typeof TextInput>, InputProps>(func
               {rightIconNode}
             </TouchableOpacity>
           ) : (
-            <View style={[styles.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }]}>
+            <Pressable
+              accessibilityRole="none"
+              disabled={disabled}
+              onPress={focusInput}
+              style={[styles.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }]}
+            >
               {rightIconNode}
-            </View>
+            </Pressable>
           )
         ) : null}
-      </View>
+      </Pressable>
 
       {showHint && hint ? (
         <Text style={[styles.hint, { color: chrome.hintColor }]}>{hint}</Text>
@@ -304,6 +326,9 @@ const styles = StyleSheet.create({
   disabled: {
     opacity: 0.6,
   },
+  labelPressable: {
+    alignSelf: "flex-start",
+  },
   label: {
     ...inputTypography.label,
   },
@@ -312,13 +337,21 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
   },
+  fieldWeb: {
+    // Web-only cursor for the clickable field chrome.
+    cursor: "text" as unknown as ViewStyle["cursor"],
+  },
   input: {
     flex: 1,
+    alignSelf: "stretch",
     paddingVertical: 0,
     margin: 0,
   },
   inputWeb: {
     outlineStyle: "none",
+    height: "100%",
+    minWidth: 0,
+    cursor: "text" as unknown as TextStyle["cursor"],
   } as TextStyle,
   inputAndroid: {
     includeFontPadding: false,

package/src/components/LanguageSwitcher/LanguageSwitcher.stories.tsx

@@ -50,3 +50,14 @@ export const CustomLanguages: Story = {
     </View>
   ),
 };
+
+export const IconVariant: Story = {
+  args: { variant: "icon", defaultOpen: true },
+  decorators: [
+    (Story) => (
+      <View style={{ alignItems: "flex-end", padding: 24, minHeight: 200 }}>
+        <Story />
+      </View>
+    ),
+  ],
+};

package/src/components/LanguageSwitcher/LanguageSwitcher.tsx

@@ -30,6 +30,8 @@ export interface LanguageOption {
   label: string;
 }
 
+export type LanguageSwitcherVariant = "default" | "icon";
+
 export interface LanguageSwitcherProps extends Omit<ViewProps, "style" | "children"> {
   options?: readonly LanguageOption[];
   value?: string;
@@ -39,6 +41,11 @@ export interface LanguageSwitcherProps extends Omit<ViewProps, "style" | "childr
   defaultOpen?: boolean;
   onOpenChange?: (open: boolean) => void;
   disabled?: boolean;
+  /**
+   * `default` — globe + label + chevron (marketing header).
+   * `icon` — icon-only control matching account header action buttons.
+   */
+  variant?: LanguageSwitcherVariant;
   accessibilityLabel?: string;
   style?: StyleProp<ViewStyle>;
   className?: string;
@@ -54,6 +61,13 @@ export const defaultLanguageOptions = [
 const CONTROL_WIDTH = 90;
 const CONTROL_HEIGHT = 35;
 const ICON_SIZE = 16;
+const ICON_BUTTON_SIZE = 32;
+const ICON_MENU_WIDTH = 67;
+const ICON_MENU_HEIGHT = 129;
+const ICON_MENU_TOP = 39;
+const ITEM_HEIGHT = 35;
+/** Active option wash from design (`#E38E5E` at 7%). */
+const ACTIVE_ITEM_BACKGROUND = "#E38E5E12";
 
 export const LanguageSwitcher = forwardRef<ComponentRef<typeof View>, LanguageSwitcherProps>(
   function LanguageSwitcher(
@@ -66,6 +80,7 @@ export const LanguageSwitcher = forwardRef<ComponentRef<typeof View>, LanguageSw
       defaultOpen = false,
       onOpenChange,
       disabled = false,
+      variant = "default",
       accessibilityLabel = "Language",
       style,
       className,
@@ -88,6 +103,7 @@ export const LanguageSwitcher = forwardRef<ComponentRef<typeof View>, LanguageSw
     const isOpen = isOpenControlled ? openProp : uncontrolledOpen;
     const selectedOption =
       options.find((option) => option.value === selectedValue) ?? options[0] ?? null;
+    const isIconVariant = variant === "icon";
 
     useApplyWebClassName(wrapperRef, className?.trim() || undefined);
 
@@ -147,7 +163,14 @@ export const LanguageSwitcher = forwardRef<ComponentRef<typeof View>, LanguageSw
       <View
         {...rest}
         ref={setWrapperRef}
-        style={[styles.wrapper, isOpen && styles.wrapperOpen, disabled && styles.disabled, style]}
+        style={[
+          styles.wrapper,
+          isIconVariant ? styles.wrapperIcon : styles.wrapperDefault,
+          isOpen && styles.wrapperOpen,
+          isOpen && isIconVariant && styles.wrapperOpenIcon,
+          disabled && styles.disabled,
+          style,
+        ]}
       >
         <Pressable
           ref={triggerRef}
@@ -160,21 +183,28 @@ export const LanguageSwitcher = forwardRef<ComponentRef<typeof View>, LanguageSw
           onHoverIn={() => setTriggerHovered(true)}
           onHoverOut={() => setTriggerHovered(false)}
           style={({ pressed }) => [
-            styles.trigger,
-            (triggerHovered || pressed || isOpen) && styles.triggerActive,
+            isIconVariant ? styles.triggerIcon : styles.trigger,
+            !isIconVariant && (triggerHovered || pressed || isOpen) && styles.triggerActive,
           ]}
         >
-          <GlobeIcon size={ICON_SIZE} color={colors.white} strokeWidth={2} />
-          <Text style={styles.triggerLabel} numberOfLines={1}>
-            {selectedOption?.label ?? ""}
-          </Text>
-          <View style={[styles.chevron, isOpen && styles.chevronOpen]}>
-            <ChevronDownIcon size={ICON_SIZE} color={colors.white} strokeWidth={2} />
-          </View>
+          <GlobeIcon size={ICON_SIZE} color={colors.white} strokeWidth={isIconVariant ? 1.5 : 2} />
+          {!isIconVariant ? (
+            <>
+              <Text style={styles.triggerLabel} numberOfLines={1}>
+                {selectedOption?.label ?? ""}
+              </Text>
+              <View style={[styles.chevron, isOpen && styles.chevronOpen]}>
+                <ChevronDownIcon size={ICON_SIZE} color={colors.white} strokeWidth={2} />
+              </View>
+            </>
+          ) : null}
         </Pressable>
 
         {isOpen && options.length > 0 ? (
-          <View style={styles.menu} accessibilityRole="menu">
+          <View
+            style={[styles.menu, isIconVariant ? styles.menuIcon : styles.menuDefault]}
+            accessibilityRole="menu"
+          >
             {options.map((option) => {
               const selected = option.value === selectedValue;
               return (
@@ -188,12 +218,21 @@ export const LanguageSwitcher = forwardRef<ComponentRef<typeof View>, LanguageSw
                   onHoverOut={() => setHoveredValue(null)}
                   style={({ pressed }) => [
                     styles.item,
+                    isIconVariant ? styles.itemIcon : null,
                     selected
-                      ? styles.itemSelected
+                      ? isIconVariant
+                        ? styles.itemSelectedIcon
+                        : styles.itemSelected
                       : (hoveredValue === option.value || pressed) && styles.itemHovered,
                   ]}
                 >
-                  <Text style={[styles.itemLabel, selected && styles.itemLabelSelected]}>
+                  <Text
+                    style={[
+                      styles.itemLabel,
+                      selected &&
+                        (isIconVariant ? styles.itemLabelSelectedIcon : styles.itemLabelSelected),
+                    ]}
+                  >
                     {option.label}
                   </Text>
                 </Pressable>
@@ -209,11 +248,19 @@ export const LanguageSwitcher = forwardRef<ComponentRef<typeof View>, LanguageSw
 const styles = StyleSheet.create({
   wrapper: {
     position: "relative",
-    width: CONTROL_WIDTH,
     alignSelf: "flex-start",
   },
+  wrapperDefault: {
+    width: CONTROL_WIDTH,
+  },
+  wrapperIcon: {
+    width: ICON_BUTTON_SIZE,
+  },
   wrapperOpen: {
-    zIndex: 20,
+    zIndex: 100,
+  },
+  wrapperOpenIcon: {
+    zIndex: 200,
   },
   disabled: {
     opacity: 0.6,
@@ -228,6 +275,17 @@ const styles = StyleSheet.create({
     borderRadius: 12,
     backgroundColor: "transparent",
   },
+  triggerIcon: {
+    width: ICON_BUTTON_SIZE,
+    height: ICON_BUTTON_SIZE,
+    padding: 8,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 5,
+    backgroundColor: colors.grey800,
+    borderWidth: 1,
+    borderColor: colors.grey700,
+  },
   triggerActive: {
     backgroundColor: colors.whiteAlpha6,
   },
@@ -250,22 +308,42 @@ const styles = StyleSheet.create({
   },
   menu: {
     position: "absolute",
+    padding: 8,
+    borderRadius: 12,
+    overflow: "hidden",
+  },
+  menuDefault: {
     top: CONTROL_HEIGHT + 8,
     left: 0,
     width: CONTROL_WIDTH,
-    padding: 8,
     gap: 8,
-    borderRadius: 12,
     backgroundColor: colors.whiteAlpha6,
-    overflow: "hidden",
+  },
+  menuIcon: {
+    top: ICON_MENU_TOP,
+    left: (ICON_BUTTON_SIZE - ICON_MENU_WIDTH) / 2,
+    right: "auto",
+    width: ICON_MENU_WIDTH,
+    height: ICON_MENU_HEIGHT,
+    gap: 4,
+    opacity: 1,
+    zIndex: 200,
+    backgroundColor: colors.grey800,
+    borderWidth: 1,
+    borderColor: colors.grey700,
   },
   item: {
-    height: CONTROL_HEIGHT,
+    height: ITEM_HEIGHT,
     alignItems: "center",
     justifyContent: "center",
     paddingVertical: 8,
     paddingHorizontal: 12,
     borderRadius: 8,
+    gap: 8,
+  },
+  itemIcon: {
+    width: 51,
+    alignSelf: "stretch",
   },
   itemHovered: {
     backgroundColor: colors.whiteAlpha6,
@@ -273,6 +351,9 @@ const styles = StyleSheet.create({
   itemSelected: {
     backgroundColor: colors.whiteAlpha6,
   },
+  itemSelectedIcon: {
+    backgroundColor: ACTIVE_ITEM_BACKGROUND,
+  },
   itemLabel: {
     ...languageSwitcherTypography,
     ...Platform.select({ web: { fontFamily: `${fonts.sans}, sans-serif` } }),
@@ -281,4 +362,7 @@ const styles = StyleSheet.create({
   itemLabelSelected: {
     color: colors.primary,
   },
+  itemLabelSelectedIcon: {
+    color: colors.primary,
+  },
 });

package/src/components/LanguageSwitcher/index.ts

@@ -1,2 +1,6 @@
 export { LanguageSwitcher, defaultLanguageOptions } from "./LanguageSwitcher";
-export type { LanguageOption, LanguageSwitcherProps } from "./LanguageSwitcher";
+export type {
+  LanguageOption,
+  LanguageSwitcherProps,
+  LanguageSwitcherVariant,
+} from "./LanguageSwitcher";