@ecohouse/ui 0.1.34 → 0.1.36

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,

package/src/theme/typography.ts

@@ -47,13 +47,13 @@ export const segmentedToggleTypography = {
   letterSpacing: 0,
 } as const;
 
-/** Language switcher trigger and option labels — SemiBold 14. */
+/** Language switcher trigger and option labels — SemiBold 14, tracking 3%. */
 export const languageSwitcherTypography = {
   fontFamily: fonts.sans,
   fontSize: 14,
   fontWeight: "600" as const,
-  lineHeight: 19,
-  letterSpacing: 0,
+  lineHeight: 14,
+  letterSpacing: 0.42,
 } as const;
 
 /** Counter value — Bold 14, line-height 100%, letter-spacing 0. */