@ecohouse/ui 0.1.35 → 0.1.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecohouse/ui",
-  "version": "0.1.35",
+  "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/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" },
 };

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/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

@@ -94,6 +94,8 @@ export {
   BRAND_LOGO_DEFAULT_HEIGHT,
   BRAND_LOGO_DEFAULT_WIDTH,
   FavoritesButton,
+  IconStatusBadge,
+  InfoCardV2,
   MenuItem,
 } from "./primitives";
 export type {
@@ -102,6 +104,8 @@ export type {
   BrandLogoProps,
   BrandLogoVariant,
   FavoritesButtonProps,
+  IconStatusBadgeProps,
+  InfoCardV2Props,
   MenuItemProps,
 } from "./primitives";
 
@@ -137,6 +141,7 @@ export {
   GuestsIcon,
   RatingStarIcon,
   SaveHeartIcon,
+  MoreHorizontalIcon,
   AreaExpandIcon,
   CheckSuccessIcon,
   ClockFilledIcon,
@@ -188,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: "Свободен" } };

package/src/primitives/IconStatusBadge/IconStatusBadge.tsx

@@ -0,0 +1,76 @@
+import { forwardRef, useMemo, useRef, type ComponentRef } from "react";
+import {
+  Platform,
+  StyleSheet,
+  Text,
+  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 IconStatusBadgeProps extends Omit<ViewProps, "style" | "children"> {
+  label: string;
+  icon: IconComponent;
+  iconProps?: Omit<IconProps, "size">;
+  iconSize?: number;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+}
+
+const webBlurStyle: ViewStyle =
+  Platform.OS === "web"
+    ? ({
+        backdropFilter: "blur(10px)",
+        WebkitBackdropFilter: "blur(10px)",
+      } as ViewStyle)
+    : {};
+
+export const IconStatusBadge = forwardRef<ComponentRef<typeof View>, IconStatusBadgeProps>(
+  function IconStatusBadge(
+    { label, icon: Icon, iconProps, iconSize = 16, style, className, ...rest },
+    forwardedRef,
+  ) {
+    const badgeRef = useRef<ComponentRef<typeof View>>(null);
+    const setBadgeRef = useMemo(() => mergeRefs(badgeRef, forwardedRef), [forwardedRef]);
+
+    useApplyWebClassName(badgeRef, className);
+
+    return (
+      <View {...rest} ref={setBadgeRef} style={[styles.root, webBlurStyle, style]}>
+        <Icon {...iconProps} size={iconSize} />
+        <Text numberOfLines={1} style={styles.label}>
+          {label}
+        </Text>
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  root: {
+    minHeight: 34,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 10,
+    alignSelf: "flex-start",
+    borderRadius: 39,
+    borderWidth: 1,
+    borderColor: colors.whiteAlpha10,
+    backgroundColor: "#09090966",
+  },
+  label: {
+    color: colors.white,
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "700",
+    lineHeight: 15,
+  },
+});

package/src/primitives/IconStatusBadge/index.ts

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

package/src/primitives/InfoCardV2/InfoCardV2.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { StyleSheet, View } from "react-native";
+import { BagIcon, HomeIcon, LockIcon } from "../../icons";
+import { colors } from "../../theme";
+import { InfoCardV2 } from "./InfoCardV2";
+
+const meta = {
+  title: "Primitives/InfoCardV2",
+  component: InfoCardV2,
+  args: {
+    label: "Ընդհանուր քոթեջներ",
+    value: "12",
+    icon: HomeIcon,
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+} satisfies Meta<typeof InfoCardV2>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <View style={styles.frame}>
+      <InfoCardV2 {...args} />
+    </View>
+  ),
+};
+
+export const OverviewRow: Story = {
+  render: () => (
+    <View style={styles.row}>
+      <InfoCardV2 label="Ընդհանուր քոթեջներ" value="12" icon={HomeIcon} />
+      <InfoCardV2 label="Զբաղված" value="8" icon={LockIcon} />
+      <InfoCardV2 label="Ազատ" value="4" icon={BagIcon} />
+    </View>
+  ),
+};
+
+export const WhiteIcon: Story = {
+  args: {
+    label: "Label",
+    value: "description",
+    icon: LockIcon,
+    iconProps: { color: colors.white },
+  },
+  render: (args) => (
+    <View style={styles.frame}>
+      <InfoCardV2 {...args} />
+    </View>
+  ),
+};
+
+const styles = StyleSheet.create({
+  frame: {
+    width: 411,
+  },
+  row: {
+    width: 1280,
+    flexDirection: "row",
+    gap: 24,
+  },
+});

package/src/primitives/InfoCardV2/InfoCardV2.tsx

@@ -0,0 +1,116 @@
+import { forwardRef, useMemo, useRef, type ComponentRef } from "react";
+import {
+  StyleSheet,
+  Text,
+  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 InfoCardV2Props extends Omit<ViewProps, "style" | "children"> {
+  label: string;
+  value: string;
+  icon: IconComponent;
+  iconProps?: Omit<IconProps, "size">;
+  iconSize?: number;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+}
+
+const ICON_SLOT_SIZE = 41;
+const ICON_SIZE = 20;
+
+/** Dashboard metric card with a leading icon, muted label, and emphasized value. */
+export const InfoCardV2 = forwardRef<ComponentRef<typeof View>, InfoCardV2Props>(
+  function InfoCardV2(
+    {
+      label,
+      value,
+      icon: Icon,
+      iconProps,
+      iconSize = ICON_SIZE,
+      style,
+      className,
+      accessibilityLabel,
+      ...rest
+    },
+    forwardedRef,
+  ) {
+    const containerRef = useRef<ComponentRef<typeof View>>(null);
+    const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+
+    useApplyWebClassName(containerRef, className?.trim() || undefined);
+
+    return (
+      <View
+        {...rest}
+        ref={setContainerRef}
+        accessibilityRole="text"
+        accessibilityLabel={accessibilityLabel ?? `${label}. ${value}`}
+        style={[styles.root, style]}
+      >
+        <View style={styles.iconSlot}>
+          <Icon {...iconProps} size={iconSize} color={iconProps?.color ?? colors.primary} />
+        </View>
+        <View style={styles.content}>
+          <Text numberOfLines={1} style={styles.label}>
+            {label}
+          </Text>
+          <Text numberOfLines={1} style={styles.value}>
+            {value}
+          </Text>
+        </View>
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  root: {
+    minHeight: 65,
+    padding: 12,
+    flexDirection: "row",
+    alignItems: "center",
+    flexGrow: 1,
+    flexShrink: 0,
+    flexBasis: 0,
+    gap: 16,
+    borderRadius: 16,
+    backgroundColor: colors.grey700,
+  },
+  iconSlot: {
+    width: ICON_SLOT_SIZE,
+    height: ICON_SLOT_SIZE,
+    borderRadius: 10,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    backgroundColor: colors.grey600,
+  },
+  content: {
+    minWidth: 0,
+    flexShrink: 1,
+    gap: 6,
+  },
+  label: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "500",
+    lineHeight: 16,
+    letterSpacing: 0,
+    color: colors.lightGrey,
+  },
+  value: {
+    fontFamily: fonts.sans,
+    fontSize: 16,
+    fontWeight: "700",
+    lineHeight: 19,
+    letterSpacing: 0,
+    color: colors.white,
+  },
+});

package/src/primitives/InfoCardV2/index.ts

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

package/src/primitives/index.ts

@@ -3,9 +3,16 @@ export type { AmenityProps, AmenityVariant } from "./Amenity";
 
 export { MenuItem } from "./MenuItem";
 export type { MenuItemProps } from "./MenuItem";
+
+export { InfoCardV2 } from "./InfoCardV2";
+export type { InfoCardV2Props } from "./InfoCardV2";
+
 export { FavoritesButton } from "./FavoritesButton";
 export type { FavoritesButtonProps } from "./FavoritesButton";
 
+export { IconStatusBadge } from "./IconStatusBadge";
+export type { IconStatusBadgeProps } from "./IconStatusBadge";
+
 export {
   BrandLogo,
   BRAND_LOGO_COLORS,