@ecohouse/ui 0.1.34 → 0.1.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecohouse/ui",
-  "version": "0.1.34",
+  "version": "0.1.36",
   "type": "module",
   "private": false,
   "description": "Cross-platform presentation-only UI components for EcoHouse (React Native + React Native Web)",

package/src/components/AccordionItem/AccordionItem.tsx

@@ -10,6 +10,7 @@ import {
 import {
   Animated,
   Easing,
+  Platform,
   Pressable,
   StyleSheet,
   Text,
@@ -119,9 +120,13 @@ export const AccordionItem = forwardRef<ComponentRef<typeof View>, AccordionItem
     const bodyTextStyle = [styles.body, { fontSize: bodyFontSize, lineHeight: bodyLineHeight }];
 
     return (
-      <View
+      <Pressable
         {...rest}
         ref={setContainerRef}
+        accessibilityRole="button"
+        accessibilityState={{ expanded: open }}
+        accessibilityLabel={accessibilityLabel ?? title}
+        onPress={toggle}
         style={[
           styles.root,
           {
@@ -129,16 +134,11 @@ export const AccordionItem = forwardRef<ComponentRef<typeof View>, AccordionItem
             paddingRight: paddingX,
             paddingLeft: paddingX,
           },
+          Platform.OS === "web" ? styles.rootWeb : null,
           style,
         ]}
       >
-        <Pressable
-          accessibilityRole="button"
-          accessibilityState={{ expanded: open }}
-          accessibilityLabel={accessibilityLabel ?? title}
-          onPress={toggle}
-          style={styles.header}
-        >
+        <View style={styles.header}>
           <Text style={styles.title}>{title}</Text>
           <Animated.View style={[styles.chevron, { transform: [{ rotate: chevronRotate }] }]}>
             <ChevronDownIcon
@@ -147,7 +147,7 @@ export const AccordionItem = forwardRef<ComponentRef<typeof View>, AccordionItem
               strokeWidth={2}
             />
           </Animated.View>
-        </Pressable>
+        </View>
 
         <View
           style={[styles.measureHidden, { left: paddingX, right: paddingX }]}
@@ -157,12 +157,12 @@ export const AccordionItem = forwardRef<ComponentRef<typeof View>, AccordionItem
           <Text style={bodyTextStyle}>{children}</Text>
         </View>
 
-        <Animated.View style={[styles.bodyClip, { height: bodyHeight }]}>
+        <Animated.View style={[styles.bodyClip, { height: bodyHeight }]} pointerEvents="none">
           <View style={styles.bodyInner}>
             <Text style={bodyTextStyle}>{children}</Text>
           </View>
         </Animated.View>
-      </View>
+      </Pressable>
     );
   },
 );
@@ -176,6 +176,9 @@ const styles = StyleSheet.create({
     opacity: 1,
     overflow: "hidden",
   },
+  rootWeb: {
+    cursor: "pointer" as unknown as ViewStyle["cursor"],
+  },
   header: {
     flexDirection: "row",
     alignItems: "center",

package/src/components/AccountHeader/AccountHeader.tsx

@@ -24,6 +24,8 @@ export interface AccountHeaderProps extends Omit<ViewProps, "style" | "children"
   /** When set, shows the 28×28 menu control (mobile account shell). Ignored if `onBackPress` is set. */
   onMenuPress?: () => void;
   onNotificationsPress?: () => void;
+  /** Optional control rendered to the left of notifications (e.g. language switcher). */
+  languageSlot?: ReactNode;
   /** Optional status chip (or other accessory) rendered after the title with a 12px gap. */
   badge?: ReactNode;
   /** Accessible name for the back control. Defaults to `"Back"`. */
@@ -65,6 +67,7 @@ export const AccountHeader = forwardRef<ComponentRef<typeof View>, AccountHeader
       onBackPress,
       onMenuPress,
       onNotificationsPress,
+      languageSlot,
       badge,
       backAccessibilityLabel = "Back",
       menuAccessibilityLabel = "Open menu",
@@ -141,6 +144,7 @@ export const AccountHeader = forwardRef<ComponentRef<typeof View>, AccountHeader
         </View>
 
         <View style={styles.end}>
+          {languageSlot != null ? <View style={styles.languageSlot}>{languageSlot}</View> : null}
           <Pressable
             accessibilityRole="button"
             accessibilityLabel={notificationsAccessibilityLabel}
@@ -171,6 +175,8 @@ const styles = StyleSheet.create({
     backgroundColor: colors.dark,
     borderBottomWidth: 1,
     borderBottomColor: colors.grey700,
+    zIndex: 40,
+    position: "relative",
   },
   start: {
     flex: 1,
@@ -194,6 +200,16 @@ const styles = StyleSheet.create({
   end: {
     flexShrink: 0,
     marginLeft: RIGHT_GAP,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    zIndex: 50,
+    position: "relative",
+  },
+  languageSlot: {
+    flexShrink: 0,
+    zIndex: 50,
+    position: "relative",
   },
   iconButton: {
     width: ICON_BUTTON_SIZE,

package/src/components/DatePicker/DatePicker.tsx

@@ -121,14 +121,22 @@ export type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
 
 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,
@@ -508,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>
                   ))}
@@ -756,10 +764,11 @@ const styles = StyleSheet.create({
     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`,
@@ -788,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",
   },
@@ -808,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,
@@ -817,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";

package/src/components/SegmentedToggle/SegmentedToggle.stories.tsx

@@ -52,6 +52,15 @@ type Story = StoryObj<typeof meta>;
 
 export const WithIcons: Story = {};
 
+export const IconOnly: Story = {
+  args: {
+    options: [
+      { value: "grid", label: "Grid view", icon: LayoutGridIcon, showLabel: false },
+      { value: "list", label: "List view", icon: ListViewIcon, showLabel: false },
+    ],
+  },
+};
+
 export const WithoutIcons: Story = {
   args: { options: optionsWithoutIcons, defaultValue: "first" },
 };