@ecohouse/ui 0.1.34 → 0.1.36

package/src/components/SegmentedToggle/SegmentedToggle.tsx

@@ -20,6 +20,8 @@ export interface SegmentedToggleOption {
   value: string;
   label: string;
   icon?: IconComponent;
+  /** Hides the visual label while retaining it as the accessible name. */
+  showLabel?: boolean;
 }
 
 export interface SegmentedToggleProps extends Omit<ViewProps, "style" | "children"> {
@@ -163,7 +165,7 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
         accessibilityRole="radiogroup"
       >
         {!fullWidth
-          ? options.map(({ value: optionValue, label, icon: Icon }, index) => (
+          ? options.map(({ value: optionValue, label, icon: Icon, showLabel = true }, index) => (
               <View
                 key={`${optionValue}-measurement`}
                 pointerEvents="none"
@@ -182,7 +184,9 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
                 style={styles.optionMeasurement}
               >
                 {Icon ? <Icon size={ICON_SIZE} /> : null}
-                <Text style={[styles.label, styles.contentWidthLabel]}>{label}</Text>
+                {showLabel ? (
+                  <Text style={[styles.label, styles.contentWidthLabel]}>{label}</Text>
+                ) : null}
               </View>
             ))
           : null}
@@ -195,7 +199,7 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
             ]}
           />
         ) : null}
-        {options.map(({ value: optionValue, label, icon: Icon }, index) => {
+        {options.map(({ value: optionValue, label, icon: Icon, showLabel = true }, index) => {
           const selected = optionValue === selectedValue;
           const iconColor = selected ? colors.primary : colors.whiteAlpha20;
           const labelColor = selected ? colors.whiteAlpha86 : colors.whiteAlpha40;
@@ -219,16 +223,18 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
             >
               <View style={styles.optionContent}>
                 {Icon ? <Icon size={ICON_SIZE} color={iconColor} /> : null}
-                <Text
-                  numberOfLines={fullWidth ? 1 : undefined}
-                  style={[
-                    styles.label,
-                    !fullWidth && styles.contentWidthLabel,
-                    { color: labelColor },
-                  ]}
-                >
-                  {label}
-                </Text>
+                {showLabel ? (
+                  <Text
+                    numberOfLines={fullWidth ? 1 : undefined}
+                    style={[
+                      styles.label,
+                      !fullWidth && styles.contentWidthLabel,
+                      { color: labelColor },
+                    ]}
+                  >
+                    {label}
+                  </Text>
+                ) : null}
               </View>
             </Pressable>
           );

package/src/components/Select/Select.tsx

@@ -2,6 +2,7 @@ import {
   forwardRef,
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -64,6 +65,8 @@ type SelectBaseProps = Omit<ViewProps, "style" | "children"> & {
   /** Override color for the selected value text in the trigger. */
   valueColor?: string;
   style?: StyleProp<ViewStyle>;
+  /** Styles applied to the dropdown menu only (not the trigger). */
+  menuStyle?: StyleProp<ViewStyle>;
   className?: string;
 };
 
@@ -268,6 +271,7 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
       emptyText = "No results",
       valueColor,
       style,
+      menuStyle,
       className,
       accessibilityLabel,
       // Pulled out only to keep them off `rest` (which is spread onto the root View);
@@ -297,6 +301,10 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
     const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
     const [searchQuery, setSearchQuery] = useState("");
     const [hoveredValue, setHoveredValue] = useState<string | null>(null);
+    /** Web: flip menu to the trigger's right edge when it would overflow the viewport. */
+    const [menuAlignEnd, setMenuAlignEnd] = useState(false);
+    /** Web: open above the trigger when there isn't enough space below. */
+    const [menuPlaceAbove, setMenuPlaceAbove] = useState(false);
 
     const selectedValues = useMemo(() => {
       const current = isValueControlled
@@ -330,6 +338,25 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
 
     useApplyWebClassName(rootRef, className);
 
+    const resolvedMenuWidth = useMemo(() => {
+      const flat = StyleSheet.flatten(menuStyle);
+      const width = flat?.width;
+      if (typeof width === "number") return width;
+      const minWidth = flat?.minWidth;
+      if (typeof minWidth === "number") return minWidth;
+      return null;
+    }, [menuStyle]);
+
+    const estimatedMenuHeight = useMemo(() => {
+      const searchBlock = showSearch ? 40 + 8 : 0;
+      const optionCount = Math.max(filteredOptions.length, 1);
+      const listHeight = Math.min(
+        optionCount * 43 + Math.max(0, optionCount - 1) * 8,
+        MENU_MAX_LIST_HEIGHT,
+      );
+      return 24 + searchBlock + listHeight;
+    }, [filteredOptions.length, showSearch]);
+
     const setOpen = useCallback(
       (next: boolean) => {
         if (!isOpenControlled) setUncontrolledOpen(next);
@@ -341,6 +368,8 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
         } else {
           setSearchQuery("");
           setHoveredValue(null);
+          setMenuAlignEnd(false);
+          setMenuPlaceAbove(false);
           // Let the parent reset its externally fetched options.
           onSearchChange?.("");
         }
@@ -348,6 +377,38 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
       [isOpenControlled, onOpenChange, onSearchChange, selectedValues],
     );
 
+    // Prefer start (left) / below; flip when the menu would overflow the viewport (web).
+    useLayoutEffect(() => {
+      if (Platform.OS !== "web" || !isOpen) return;
+
+      const updateMenuPlacement = () => {
+        const trigger = triggerRef.current as unknown as {
+          getBoundingClientRect?: () => DOMRect;
+        } | null;
+        const rect = trigger?.getBoundingClientRect?.();
+        if (!rect) return;
+
+        const viewportPadding = 8;
+        const gap = 8;
+        const menuWidth = Math.max(rect.width, resolvedMenuWidth ?? 0);
+        const overflowsRight = rect.left + menuWidth > window.innerWidth - viewportPadding;
+        setMenuAlignEnd(overflowsRight);
+
+        const spaceBelow = window.innerHeight - viewportPadding - rect.bottom;
+        const spaceAbove = rect.top - viewportPadding;
+        const needsAbove = estimatedMenuHeight + gap > spaceBelow && spaceAbove > spaceBelow;
+        setMenuPlaceAbove(needsAbove);
+      };
+
+      updateMenuPlacement();
+      window.addEventListener("resize", updateMenuPlacement);
+      window.addEventListener("scroll", updateMenuPlacement, true);
+      return () => {
+        window.removeEventListener("resize", updateMenuPlacement);
+        window.removeEventListener("scroll", updateMenuPlacement, true);
+      };
+    }, [estimatedMenuHeight, isOpen, resolvedMenuWidth]);
+
     const handleSearchChange = (text: string) => {
       setSearchQuery(text);
       onSearchChange?.(text);
@@ -583,7 +644,14 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
           </Pressable>
 
           {isOpen ? (
-            <View style={styles.menu}>
+            <View
+              style={[
+                styles.menu,
+                menuAlignEnd ? styles.menuAlignEnd : styles.menuAlignStart,
+                menuPlaceAbove ? styles.menuAbove : styles.menuBelow,
+                menuStyle,
+              ]}
+            >
               {showSearch ? (
                 <View style={styles.searchField}>
                   <View style={styles.iconSlot}>
@@ -777,10 +845,7 @@ const styles = StyleSheet.create({
   },
   menu: {
     position: "absolute",
-    top: "100%",
-    left: 0,
-    right: 0,
-    marginTop: 8,
+    minWidth: "100%",
     zIndex: 10,
     borderRadius: MENU_RADIUS,
     padding: 12,
@@ -795,6 +860,26 @@ const styles = StyleSheet.create({
       },
     }),
   },
+  menuAlignStart: {
+    left: 0,
+    right: "auto",
+  },
+  menuAlignEnd: {
+    left: "auto",
+    right: 0,
+  },
+  menuBelow: {
+    top: "100%",
+    bottom: "auto",
+    marginTop: 8,
+    marginBottom: 0,
+  },
+  menuAbove: {
+    top: "auto",
+    bottom: "100%",
+    marginTop: 0,
+    marginBottom: 8,
+  },
   optionList: {
     maxHeight: MENU_MAX_LIST_HEIGHT,
   },

package/src/components/Textarea/Textarea.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,
@@ -132,6 +133,8 @@ export const Textarea = forwardRef<ComponentRef<typeof TextInput>, TextareaProps
   const setInputRef = useMemo(() => mergeRefs(inputRef, forwardedRef), [forwardedRef]);
   const [focused, setFocused] = useState(false);
   const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? "");
+  const reactId = useId();
+  const inputDomId = `eh-textarea-${reactId.replace(/:/g, "")}`;
 
   const isControlled = typeof value === "string";
   const currentValue = isControlled ? value : uncontrolledValue;
@@ -141,28 +144,40 @@ export const Textarea = forwardRef<ComponentRef<typeof TextInput>, TextareaProps
   const chrome = chromeFor(visualState);
   const resolvedAccessibilityLabel = accessibilityLabel ?? (showLabel ? undefined : label);
 
+  const focusInput = () => {
+    if (disabled) return;
+    inputRef.current?.focus();
+  };
+
   useApplyWebClassName(rootRef, className);
   useApplyWebClassName(inputRef, inputClassName);
 
   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
+      <Pressable
+        accessibilityRole="none"
+        disabled={disabled}
+        onPress={focusInput}
         style={[
           styles.field,
           {
             borderColor: chrome.borderColor,
             backgroundColor: chrome.backgroundColor,
           },
+          Platform.OS === "web" ? styles.fieldWeb : null,
           fieldStyle,
         ]}
       >
         <TextInput
           ref={setInputRef}
           {...textInputProps}
+          nativeID={inputDomId}
           multiline
           textAlignVertical="top"
           value={isControlled ? value : undefined}
@@ -193,7 +208,7 @@ export const Textarea = forwardRef<ComponentRef<typeof TextInput>, TextareaProps
           accessibilityLabel={resolvedAccessibilityLabel}
           accessibilityState={{ disabled }}
         />
-      </View>
+      </Pressable>
 
       {showHint && hint ? (
         <Text style={[styles.hint, { color: chrome.hintColor }]}>{hint}</Text>
@@ -211,6 +226,9 @@ const styles = StyleSheet.create({
   disabled: {
     opacity: 0.6,
   },
+  labelPressable: {
+    alignSelf: "flex-start",
+  },
   label: {
     ...textareaTypography.label,
   },
@@ -223,14 +241,21 @@ const styles = StyleSheet.create({
     paddingLeft: FIELD_PADDING_HORIZONTAL,
     paddingRight: FIELD_PADDING_HORIZONTAL,
   },
+  fieldWeb: {
+    cursor: "text" as unknown as ViewStyle["cursor"],
+  },
   input: {
     flex: 1,
+    alignSelf: "stretch",
     paddingVertical: 0,
     margin: 0,
   },
   inputWeb: {
     outlineStyle: "none",
     resize: "none",
+    height: "100%",
+    minWidth: 0,
+    cursor: "text" as unknown as TextStyle["cursor"],
   } as TextStyle,
   inputAndroid: {
     includeFontPadding: false,

package/src/components/index.ts

@@ -41,7 +41,11 @@ export { Sidebar } from "./Sidebar";
 export type { SidebarProps, SidebarItem, SidebarUser } from "./Sidebar";
 
 export { LanguageSwitcher, defaultLanguageOptions } from "./LanguageSwitcher";
-export type { LanguageOption, LanguageSwitcherProps } from "./LanguageSwitcher";
+export type {
+  LanguageOption,
+  LanguageSwitcherProps,
+  LanguageSwitcherVariant,
+} from "./LanguageSwitcher";
 
 export { StatCard } from "./StatCard";
 export type { StatCardProps } from "./StatCard";

package/src/icons/Globe/GlobeIcon.tsx

@@ -3,9 +3,9 @@ import { colors } from "../../theme";
 import type { IconProps } from "../types";
 import { GLOBE_PATH } from "./globePath";
 
-export function GlobeIcon({ size = 20, color = colors.primary, strokeWidth = 2 }: IconProps) {
+export function GlobeIcon({ size = 16, color = colors.primary, strokeWidth = 1.5 }: IconProps) {
   return (
-    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
       <Path
         d={GLOBE_PATH}
         stroke={color}

package/src/icons/Globe/GlobeIcon.web.tsx

@@ -2,12 +2,12 @@ import { colors } from "../../theme";
 import type { IconProps } from "../types";
 import { GLOBE_PATH } from "./globePath";
 
-export function GlobeIcon({ size = 20, color = colors.primary, strokeWidth = 2 }: IconProps) {
+export function GlobeIcon({ size = 16, color = colors.primary, strokeWidth = 1.5 }: IconProps) {
   return (
     <svg
       width={size}
       height={size}
-      viewBox="0 0 20 20"
+      viewBox="0 0 16 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       aria-hidden

package/src/icons/Globe/globePath.ts

@@ -1,3 +1,3 @@
-/** Globe paths — 20×20 viewBox. */
+/** Globe paths — 16×16 viewBox. */
 export const GLOBE_PATH =
-  "M18.3333 10C18.3333 14.6024 14.6024 18.3333 10 18.3333M18.3333 10C18.3333 5.39763 14.6024 1.66667 10 1.66667M18.3333 10H1.66667M10 18.3333C5.39763 18.3333 1.66667 14.6024 1.66667 10M10 18.3333C12.0833 16.0511 13.2675 13.0836 13.3333 10C13.2675 6.91643 12.0833 3.94892 10 1.66667M10 18.3333C7.91667 16.0511 6.73248 13.0836 6.66667 10C6.73248 6.91643 7.91667 3.94892 10 1.66667M1.66667 10C1.66667 5.39763 5.39763 1.66667 10 1.66667";
+  "M1.3335 8.00004H14.6668M1.3335 8.00004C1.3335 11.6819 4.31826 14.6667 8.00016 14.6667M1.3335 8.00004C1.3335 4.31814 4.31826 1.33337 8.00016 1.33337M14.6668 8.00004C14.6668 11.6819 11.6821 14.6667 8.00016 14.6667M14.6668 8.00004C14.6668 4.31814 11.6821 1.33337 8.00016 1.33337M8.00016 1.33337C9.66768 3.15894 10.6153 5.52806 10.6668 8.00004C10.6153 10.472 9.66768 12.8411 8.00016 14.6667M8.00016 1.33337C6.33264 3.15894 5.38499 5.52806 5.3335 8.00004C5.38499 10.472 6.33264 12.8411 8.00016 14.6667";

package/src/icons/Key/keyPath.ts

@@ -1,2 +1,2 @@
 export const KEY_PATH =
-  "M5.28673 10.0002L7.0545 11.768M7.6435 7.64301L9.41127 9.41078M10.0003 5.28624L11.768 7.05401M4.22553 11.0604L11.0609 4.22505C11.7209 3.56502 12.0513 3.235 12.4318 3.11136C12.7666 3.00259 13.127 3.00259 13.4618 3.11136C13.8421 3.23494 14.1718 3.56464 14.8311 4.22393L15.775 5.16785C16.4351 5.82788 16.7654 6.15867 16.8891 6.53922C16.9979 6.87396 16.9976 7.23381 16.8889 7.56855C16.7652 7.9491 16.4353 8.27937 15.7753 8.9394L8.93989 15.7748C8.27986 16.4348 7.94959 16.7647 7.56904 16.8884C7.2343 16.9971 6.87445 16.9974 6.53971 16.8886C6.15916 16.765 5.82837 16.4346 5.16834 15.7745L4.22441 14.8306C3.56513 14.1713 3.23542 13.8416 3.11185 13.4613C3.00308 13.1266 3.00308 12.7661 3.11185 12.4313C3.23549 12.0508 3.56551 11.7204 4.22553 11.0604Z";
+  "M14.1668 8.33333V6.66667C14.1668 4.36548 12.3013 2.5 10.0002 2.5C7.69898 2.5 5.8335 4.36548 5.8335 6.66667V8.33333M10.0002 12.0833V13.75M7.3335 17.5H12.6668C14.067 17.5 14.767 17.5 15.3018 17.2275C15.7722 16.9878 16.1547 16.6054 16.3943 16.135C16.6668 15.6002 16.6668 14.9001 16.6668 13.5V12.3333C16.6668 10.9332 16.6668 10.2331 16.3943 9.69836C16.1547 9.22795 15.7722 8.8455 15.3018 8.60582C14.767 8.33333 14.067 8.33333 12.6668 8.33333H7.3335C5.93336 8.33333 5.2333 8.33333 4.69852 8.60582C4.22811 8.8455 3.84566 9.22795 3.60598 9.69836C3.3335 10.2331 3.3335 10.9332 3.3335 12.3333V13.5C3.3335 14.9001 3.3335 15.6002 3.60598 16.135C3.84566 16.6054 4.22811 16.9878 4.69852 17.2275C5.2333 17.5 5.93336 17.5 7.3335 17.5Z";

package/src/icons/MoreHorizontal/MoreHorizontalIcon.tsx

@@ -0,0 +1,26 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { MORE_HORIZONTAL_PATH } from "./moreHorizontalPath";
+
+export { MORE_HORIZONTAL_PATH } from "./moreHorizontalPath";
+
+const ASPECT_RATIO = 4 / 13;
+
+export function MoreHorizontalIcon({
+  size = 13,
+  color = colors.white,
+  strokeWidth = 2,
+}: IconProps) {
+  return (
+    <Svg width={size} height={size * ASPECT_RATIO} viewBox="0 0 13 4" fill="none">
+      <Path
+        d={MORE_HORIZONTAL_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/MoreHorizontal/MoreHorizontalIcon.web.tsx

@@ -0,0 +1,25 @@
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { MORE_HORIZONTAL_PATH } from "./moreHorizontalPath";
+
+export { MORE_HORIZONTAL_PATH } from "./moreHorizontalPath";
+
+const ASPECT_RATIO = 4 / 13;
+
+export function MoreHorizontalIcon({
+  size = 13,
+  color = colors.white,
+  strokeWidth = 2,
+}: IconProps) {
+  return (
+    <svg width={size} height={size * ASPECT_RATIO} viewBox="0 0 13 4" fill="none" aria-hidden>
+      <path
+        d={MORE_HORIZONTAL_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/MoreHorizontal/index.ts

@@ -0,0 +1 @@
+export { MoreHorizontalIcon, MORE_HORIZONTAL_PATH } from "./MoreHorizontalIcon";

package/src/icons/MoreHorizontal/moreHorizontalPath.ts

@@ -0,0 +1,2 @@
+export const MORE_HORIZONTAL_PATH =
+  "M6.33333 2.33333C6.70152 2.33333 7 2.03486 7 1.66667C7 1.29848 6.70152 1 6.33333 1C5.96514 1 5.66667 1.29848 5.66667 1.66667C5.66667 2.03486 5.96514 2.33333 6.33333 2.33333ZM11 2.33333C11.3682 2.33333 11.6667 2.03486 11.6667 1.66667C11.6667 1.29848 11.3682 1 11 1C10.6318 1 10.3333 1.29848 10.3333 1.66667C10.3333 2.03486 10.6318 2.33333 11 2.33333ZM1.66667 2.33333C2.03486 2.33333 2.33333 2.03486 2.33333 1.66667C2.33333 1.29848 2.03486 1 1.66667 1C1.29848 1 1 1.29848 1 1.66667C1 2.03486 1.29848 2.33333 1.66667 2.33333Z";

package/src/icons/TableView/TableViewIcon.tsx

@@ -0,0 +1,20 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { TABLE_VIEW_PATH } from "./tableViewPath";
+
+export { TABLE_VIEW_PATH } from "./tableViewPath";
+
+export function TableViewIcon({ size = 17, color = colors.grey400, strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 17 17" fill="none">
+      <Path
+        d={TABLE_VIEW_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/TableView/TableViewIcon.web.tsx

@@ -0,0 +1,26 @@
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { TABLE_VIEW_PATH } from "./tableViewPath";
+
+export { TABLE_VIEW_PATH } from "./tableViewPath";
+
+export function TableViewIcon({ size = 17, color = colors.grey400, strokeWidth = 2 }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 17 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={TABLE_VIEW_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/TableView/index.ts

@@ -0,0 +1 @@
+export { TableViewIcon, TABLE_VIEW_PATH } from "./TableViewIcon";

package/src/icons/TableView/tableViewPath.ts

@@ -0,0 +1,2 @@
+export const TABLE_VIEW_PATH =
+  "M1 6L16 6M6 1L6 16M5 1H12C13.4001 1 14.1002 1 14.635 1.27248C15.1054 1.51217 15.4878 1.89462 15.7275 2.36502C16 2.8998 16 3.59987 16 5V12C16 13.4001 16 14.1002 15.7275 14.635C15.4878 15.1054 15.1054 15.4878 14.635 15.7275C14.1002 16 13.4001 16 12 16H5C3.59987 16 2.8998 16 2.36502 15.7275C1.89462 15.4878 1.51217 15.1054 1.27248 14.635C1 14.1002 1 13.4001 1 12V5C1 3.59987 1 2.8998 1.27248 2.36502C1.51217 1.89462 1.89462 1.51217 2.36502 1.27248C2.8998 1 3.59987 1 5 1Z";

package/src/icons/index.ts

@@ -70,6 +70,7 @@ export { MapCollapseIcon, MapExpandIcon } from "./MapControls";
 export { MenuIcon } from "./Menu";
 export type { MenuIconProps } from "./Menu";
 export { MenuLinesIcon } from "./MenuLines";
+export { MoreHorizontalIcon } from "./MoreHorizontal";
 export { NavigateIcon } from "./Navigate";
 export { PhoneIcon } from "./Phone";
 export { PlusIcon } from "./Plus";
@@ -83,6 +84,7 @@ export { SidebarIcon } from "./Sidebar";
 export { SortIcon } from "./Sort";
 export { StarIcon } from "./Star";
 export { StarFilledIcon } from "./StarFilled";
+export { TableViewIcon } from "./TableView";
 export { UserIcon } from "./User";
 export { UsersAltIcon } from "./UsersAlt";
 export { VideoIcon } from "./Video";

package/src/icons/registry.ts

@@ -60,6 +60,7 @@ import { MapCollapseIcon, MapExpandIcon } from "./MapControls";
 import { MenuIcon } from "./Menu";
 import { MenuLinesIcon } from "./MenuLines";
 import { MinusIcon } from "./Minus";
+import { MoreHorizontalIcon } from "./MoreHorizontal";
 import { NavigateIcon } from "./Navigate";
 import { PhoneIcon } from "./Phone";
 import { PlusIcon } from "./Plus";
@@ -72,6 +73,7 @@ import { SidebarIcon } from "./Sidebar";
 import { SortIcon } from "./Sort";
 import { StarIcon } from "./Star";
 import { StarFilledIcon } from "./StarFilled";
+import { TableViewIcon } from "./TableView";
 import { UserIcon } from "./User";
 import { UsersAltIcon } from "./UsersAlt";
 import { VideoIcon } from "./Video";
@@ -133,6 +135,7 @@ export const icons = {
   menu: MenuIcon,
   menuLines: MenuLinesIcon,
   minus: MinusIcon,
+  moreHorizontal: MoreHorizontalIcon,
   navigate: NavigateIcon,
   noSmoking: NoSmokingIcon,
   paw: PawIcon,
@@ -152,6 +155,7 @@ export const icons = {
   sort: SortIcon,
   star: StarIcon,
   starFilled: StarFilledIcon,
+  tableView: TableViewIcon,
   tooltipArrow: TooltipArrowIcon,
   trash: TrashIcon,
   user: UserIcon,
@@ -181,6 +185,7 @@ export const iconGroups = {
     "menu",
     "menuLines",
     "navigate",
+    "tableView",
   ],
   actions: [
     "show",
@@ -211,6 +216,7 @@ export const iconGroups = {
     "star",
     "starFilled",
     "minus",
+    "moreHorizontal",
     "plus",
     "refresh",
     "refundStatus",

package/src/index.ts

@@ -54,6 +54,7 @@ export type {
   SidebarUser,
   LanguageOption,
   LanguageSwitcherProps,
+  LanguageSwitcherVariant,
   StatCardProps,
   ButtonProps,
   ButtonSize,
@@ -93,6 +94,8 @@ export {
   BRAND_LOGO_DEFAULT_HEIGHT,
   BRAND_LOGO_DEFAULT_WIDTH,
   FavoritesButton,
+  IconStatusBadge,
+  InfoCardV2,
   MenuItem,
 } from "./primitives";
 export type {
@@ -101,6 +104,8 @@ export type {
   BrandLogoProps,
   BrandLogoVariant,
   FavoritesButtonProps,
+  IconStatusBadgeProps,
+  InfoCardV2Props,
   MenuItemProps,
 } from "./primitives";
 
@@ -136,6 +141,7 @@ export {
   GuestsIcon,
   RatingStarIcon,
   SaveHeartIcon,
+  MoreHorizontalIcon,
   AreaExpandIcon,
   CheckSuccessIcon,
   ClockFilledIcon,
@@ -187,6 +193,7 @@ export {
   SortIcon,
   StarIcon,
   StarFilledIcon,
+  TableViewIcon,
   UserIcon,
   UsersAltIcon,
   VideoIcon,

package/src/primitives/IconStatusBadge/IconStatusBadge.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { LockIcon } from "../../icons";
+import { IconStatusBadge } from "./IconStatusBadge";
+
+const meta = {
+  title: "Primitives/Icon Status Badge",
+  component: IconStatusBadge,
+  args: {
+    icon: LockIcon,
+    iconProps: { color: "#60C27A" },
+    label: "Available",
+  },
+  parameters: { backgrounds: { default: "black" } },
+} satisfies Meta<typeof IconStatusBadge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Armenian: Story = { args: { label: "Ազատ" } };
+export const English: Story = {};
+export const Russian: Story = { args: { label: "Свободен" } };