@ecohouse/ui 0.1.60 → 0.1.61

package/package.json

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

package/src/icons/PaymentCard/PaymentCardIcon.tsx

@@ -0,0 +1,14 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { PAYMENT_CARD_PATH } from "./paymentCardPath";
+
+export function PaymentCardIcon({ size = 16, color = colors.grey100 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path d={PAYMENT_CARD_PATH} fill={color} />
+    </Svg>
+  );
+}
+
+export { PAYMENT_CARD_PATH } from "./paymentCardPath";

package/src/icons/PaymentCard/PaymentCardIcon.web.tsx

@@ -0,0 +1,13 @@
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { PAYMENT_CARD_PATH } from "./paymentCardPath";
+
+export function PaymentCardIcon({ size = 16, color = colors.grey100 }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path d={PAYMENT_CARD_PATH} fill={color} />
+    </svg>
+  );
+}
+
+export { PAYMENT_CARD_PATH } from "./paymentCardPath";

package/src/icons/PaymentCard/index.ts

@@ -0,0 +1 @@
+export { PaymentCardIcon, PAYMENT_CARD_PATH } from "./PaymentCardIcon";

package/src/icons/PaymentCard/paymentCardPath.ts

@@ -0,0 +1,3 @@
+/** Filled payment card icon path — 16×16 viewBox. */
+export const PAYMENT_CARD_PATH =
+  "M4.66536 10H6.66536C6.84218 10 7.01174 9.9298 7.13677 9.80478C7.26179 9.67975 7.33203 9.51019 7.33203 9.33337C7.33203 9.15656 7.26179 8.98699 7.13677 8.86197C7.01174 8.73695 6.84218 8.66671 6.66536 8.66671H4.66536C4.48855 8.66671 4.31898 8.73695 4.19396 8.86197C4.06894 8.98699 3.9987 9.15656 3.9987 9.33337C3.9987 9.51019 4.06894 9.67975 4.19396 9.80478C4.31898 9.9298 4.48855 10 4.66536 10ZM12.6654 3.33337H3.33203C2.8016 3.33337 2.29289 3.54409 1.91782 3.91916C1.54274 4.29423 1.33203 4.80294 1.33203 5.33337V11.3334C1.33203 11.8638 1.54274 12.3725 1.91782 12.7476C2.29289 13.1227 2.8016 13.3334 3.33203 13.3334H12.6654C13.1958 13.3334 13.7045 13.1227 14.0796 12.7476C14.4546 12.3725 14.6654 11.8638 14.6654 11.3334V5.33337C14.6654 4.80294 14.4546 4.29423 14.0796 3.91916C13.7045 3.54409 13.1958 3.33337 12.6654 3.33337ZM13.332 11.3334C13.332 11.5102 13.2618 11.6798 13.1368 11.8048C13.0117 11.9298 12.8422 12 12.6654 12H3.33203C3.15522 12 2.98565 11.9298 2.86063 11.8048C2.7356 11.6798 2.66536 11.5102 2.66536 11.3334V7.33337H13.332V11.3334ZM13.332 6.00004H2.66536V5.33337C2.66536 5.15656 2.7356 4.98699 2.86063 4.86197C2.98565 4.73695 3.15522 4.66671 3.33203 4.66671H12.6654C12.8422 4.66671 13.0117 4.73695 13.1368 4.86197C13.2618 4.98699 13.332 5.15656 13.332 5.33337V6.00004Z";

package/src/icons/Receipt/ReceiptIcon.tsx

@@ -0,0 +1,14 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { RECEIPT_PATH } from "./receiptPath";
+
+export function ReceiptIcon({ size = 16, color = colors.grey100 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path d={RECEIPT_PATH} fill={color} />
+    </Svg>
+  );
+}
+
+export { RECEIPT_PATH } from "./receiptPath";

package/src/icons/Receipt/ReceiptIcon.web.tsx

@@ -0,0 +1,13 @@
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { RECEIPT_PATH } from "./receiptPath";
+
+export function ReceiptIcon({ size = 16, color = colors.grey100 }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path d={RECEIPT_PATH} fill={color} />
+    </svg>
+  );
+}
+
+export { RECEIPT_PATH } from "./receiptPath";

package/src/icons/Receipt/index.ts

@@ -0,0 +1 @@
+export { ReceiptIcon, RECEIPT_PATH } from "./ReceiptIcon";

package/src/icons/Receipt/receiptPath.ts

@@ -0,0 +1,3 @@
+/** Filled receipt icon path — 16×16 viewBox. */
+export const RECEIPT_PATH =
+  "M6.66667 5.33337H10.6667C10.8435 5.33337 11.013 5.26314 11.1381 5.13811C11.2631 5.01309 11.3333 4.84352 11.3333 4.66671C11.3333 4.4899 11.2631 4.32033 11.1381 4.1953C11.013 4.07028 10.8435 4.00004 10.6667 4.00004H6.66667C6.48986 4.00004 6.32029 4.07028 6.19526 4.1953C6.07024 4.32033 6 4.4899 6 4.66671C6 4.84352 6.07024 5.01309 6.19526 5.13811C6.32029 5.26314 6.48986 5.33337 6.66667 5.33337ZM5.33333 8.00004H10.6667C10.8435 8.00004 11.013 7.9298 11.1381 7.80478C11.2631 7.67975 11.3333 7.51019 11.3333 7.33337C11.3333 7.15656 11.2631 6.98699 11.1381 6.86197C11.013 6.73695 10.8435 6.66671 10.6667 6.66671H5.33333C5.15652 6.66671 4.98695 6.73695 4.86193 6.86197C4.7369 6.98699 4.66667 7.15656 4.66667 7.33337C4.66667 7.51019 4.7369 7.67975 4.86193 7.80478C4.98695 7.9298 5.15652 8.00004 5.33333 8.00004ZM5.33333 10.6667H10.6667C10.8435 10.6667 11.013 10.5965 11.1381 10.4714C11.2631 10.3464 11.3333 10.1769 11.3333 10C11.3333 9.82323 11.2631 9.65366 11.1381 9.52864C11.013 9.40361 10.8435 9.33337 10.6667 9.33337H5.33333C5.15652 9.33337 4.98695 9.40361 4.86193 9.52864C4.7369 9.65366 4.66667 9.82323 4.66667 10C4.66667 10.1769 4.7369 10.3464 4.86193 10.4714C4.98695 10.5965 5.15652 10.6667 5.33333 10.6667ZM13.3333 1.33337H2.66667C2.48986 1.33337 2.32029 1.40361 2.19526 1.52864C2.07024 1.65366 2 1.82323 2 2.00004V14C2 14.1238 2.03448 14.2452 2.09957 14.3505C2.16466 14.4558 2.25779 14.541 2.36852 14.5963C2.47926 14.6517 2.60323 14.6751 2.72654 14.664C2.84984 14.6529 2.96762 14.6077 3.06667 14.5334L4.44667 13.5L5.82 14.5334C5.9354 14.6199 6.07575 14.6667 6.22 14.6667C6.36425 14.6667 6.5046 14.6199 6.62 14.5334L8 13.5L9.38 14.5334C9.4954 14.6199 9.63575 14.6667 9.78 14.6667C9.92425 14.6667 10.0646 14.6199 10.18 14.5334L11.5533 13.5L12.9333 14.5334C13.0329 14.6075 13.1511 14.6525 13.2748 14.6631C13.3985 14.6737 13.5226 14.6495 13.6333 14.5934C13.7433 14.538 13.8357 14.4532 13.9005 14.3485C13.9652 14.2438 13.9996 14.1232 14 14V2.00004C14 1.82323 13.9298 1.65366 13.8047 1.52864C13.6797 1.40361 13.5101 1.33337 13.3333 1.33337ZM12.6667 12.6667L11.9533 12.1334C11.8379 12.0468 11.6976 12 11.5533 12C11.4091 12 11.2687 12.0468 11.1533 12.1334L9.78 13.1667L8.4 12.1334C8.2846 12.0468 8.14425 12 8 12C7.85575 12 7.7154 12.0468 7.6 12.1334L6.22 13.1667L4.84667 12.1334C4.73127 12.0468 4.59091 12 4.44667 12C4.30242 12 4.16206 12.0468 4.04667 12.1334L3.33333 12.6667V2.66671H12.6667V12.6667Z";

package/src/icons/index.ts

@@ -102,9 +102,11 @@ export { NotificationQrCodeIcon } from "./NotificationQrCode";
 export { NotificationSuccessIcon } from "./NotificationSuccess";
 export { NotificationWarningIcon } from "./NotificationWarning";
 export { PhoneIcon } from "./Phone";
+export { PaymentCardIcon } from "./PaymentCard";
 export { PlusIcon } from "./Plus";
 export { MinusIcon } from "./Minus";
 export { RefreshIcon } from "./Refresh";
+export { ReceiptIcon } from "./Receipt";
 export { RefundStatusIcon } from "./RefundStatus";
 export { SearchIcon } from "./Search";
 export { SettingsIcon } from "./Settings";

package/src/icons/registry.ts

@@ -90,8 +90,10 @@ import { NotificationQrCodeIcon } from "./NotificationQrCode";
 import { NotificationSuccessIcon } from "./NotificationSuccess";
 import { NotificationWarningIcon } from "./NotificationWarning";
 import { PhoneIcon } from "./Phone";
+import { PaymentCardIcon } from "./PaymentCard";
 import { PlusIcon } from "./Plus";
 import { RefreshIcon } from "./Refresh";
+import { ReceiptIcon } from "./Receipt";
 import { RefundStatusIcon } from "./RefundStatus";
 import { SearchIcon } from "./Search";
 import { SettingsIcon } from "./Settings";
@@ -191,12 +193,14 @@ export const icons = {
   notificationSuccess: NotificationSuccessIcon,
   notificationWarning: NotificationWarningIcon,
   paw: PawIcon,
+  paymentCard: PaymentCardIcon,
   phone: PhoneIcon,
   qrCode: QrCodeIcon,
   quietHours: QuietHoursIcon,
   ratingStar: RatingStarIcon,
   plus: PlusIcon,
   refresh: RefreshIcon,
+  receipt: ReceiptIcon,
   refundStatus: RefundStatusIcon,
   search: SearchIcon,
   saveHeart: SaveHeartIcon,

package/src/index.ts

@@ -225,8 +225,10 @@ export {
   NotificationSuccessIcon,
   NotificationWarningIcon,
   PhoneIcon,
+  PaymentCardIcon,
   PlusIcon,
   RefreshIcon,
+  ReceiptIcon,
   RefundStatusIcon,
   SearchIcon,
   SettingsIcon,

package/src/theme/typography.ts

@@ -47,12 +47,12 @@ export const segmentedToggleTypography = {
   letterSpacing: 0,
 } as const;
 
-/** Language switcher trigger and option labels — SemiBold 14, tracking 3%. */
+/** Language switcher trigger and option labels — SemiBold 14, 18px line-height, tracking 3%. */
 export const languageSwitcherTypography = {
   fontFamily: fonts.sans,
   fontSize: 14,
   fontWeight: "600" as const,
-  lineHeight: 14,
+  lineHeight: 18,
   letterSpacing: 0.42,
 } as const;